font-spider 字体包压缩

遇到的问题集合 本文总阅读量次

PingFang Medium.ttf字体包太大了，但是除了英文和数字基本其他都用不上，需要压缩下字体包

  • 背景：PingFang Medium.ttf字体包太大了，但是除了英文和数字基本其他都用不上，需要压缩下字体包
  • 使用font-spider： 将需要的文字压缩成一个包
  • 奇怪的点： 在react项目里建一个html文件来搞不得行，另起了一个文件夹就行了
  • 参考： 项目首页 - font-spider:Smart webfont compression and format conversion tool - GitCode
  • 使用方式：

    • 新建个文件夹下放inedx.html和PingFang Medium.ttf

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      // index.html内容
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />

          <title>Document</title>
          <style>
            @font-face {
              font-weight: normal;
              font-family: "PingFang";
              font-style: normal;
              src: url("./PingFang Medium.ttf");
            }
             .original {
              font-family: "PingFang";
            }
         
          </style>
        </head>
        <body>
             <div class="original">
              abcdefghijklmnopqrstuvwxyz
              0123456789
              ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
        </body>
      </html>

    • 安装插件npm i font-spider -g

    • 查看版本 确定安装成功 font-spider -V

    • 执行命令font-spider index.html 或者font-spider ./*.html会在原处生成新的ttf文件替换掉ttf文件，原ttf文件会自动备份在一个新的文件夹.font-spider 下面

遇到的问题集合