从字体文件中提取指定文字生成新的字体文件

曾经遇到一个可怕的设计,项目需求要为首页加一个加载进度条,并且在下边显示加载进度,然后甩给我一个8.6MB大小的字体包,告诉目瞪口呆的我,用来展示百分比。在劝说无果的情况下,我宿便给他加上了,结果就是资源都加载完毕了,字体文件还没加载完成,导致加载进度不显示。在成功的劝退后,我想到了加载进度只用到了0-9以及一个%,那么能否将他们提取出来呢?答案是可以的!这样将会大大减少字体包的体积。并且让UI对我感恩戴德,哈哈哈!

前期准备

  1. Java 环境,以 MacOS 为例,输入以下命令查看当前 Java 版本:
  2. java -version // 如未安装 Jave 环境,点击系统弹窗的 更多信息... 按钮,下载 Java SE
    
    1
    2
    3
    4
    3. 在桌面新建文件夹,此处以 font 为例。
    4. 下载 <a href="/Extracting-fonts/sfnttool.jar">sfnttool.jar</a>,放入 font 文件夹。
    5. 将需要提取的 .ttf 格式的字体文件,放入 font 文件夹内。
    6. 运行命令:
    java -jar sfnttool.jar -s '字体提取' font.ttf _font.ttf
{% asset_img create.png '' %}

参数说明:
1. 单引号内为需要提取的文字
2. font.ttf 为原字体文件
3. _font.ttf 为提取后的字体文件

如提取文字较多,可以将 '' 内的文字,放入以 .txt 后缀结尾的文本文档中,将 '' 替换为 ***.txt

### 测试
1. 代码如下:
{% asset_img code.png '' %}
2. 浏览器下的展示效果:
{% asset_img style.png '' %}
3. 我们可以看到,我提取的文字为 字体提取 四个字,我代码展示的为 字体测试 四个字,测试 二字并不在字体中,所以没有字体样式。