不是第一次弄这个东西,一套流程下来觉得步骤还是有点繁琐,所以备忘一下。

需求

设计网页的时候常会用到一些非系统自带的字体,要实现的做法不外乎以下几种

  1. 把所有艺术字体部分作为图片素材处理
  2. 在CSS中引用外部的自定义 ttf字体库文件
  3. 提着菜刀找产品经理和设计师,让他们把字体改回用宋体(笑)

无论1或是2,都有比较明显的缺点。
作为图片处理的话,每次出现一个小改动比如说需要改动个别文字,那就得打开PS重新做一个图片素材,而且网页加载图片展现效果和对带宽的利用都不甚理想。
外挂ttf字库的话浪费带宽流量的问题则更为严重,如果是西文字库还好(也就十几个符号和大小写52个字母)中文的话字库文件通常2M起步,整套粗细斜字库像阿里普惠体一共30M+。用户手机打开你的页面单单为了显示文字就不见30M流量是不实际的,如果同时来一千几百个用户,服务器更是会因为带宽堵塞直接扑街。

那有没有好的解决方案,有!把项目需要用到的字提取出来重新打包成一个定制化的字库文件,也就是做TTF压缩。

啰嗦科普完,下面开干。内容分上下两篇

不知道是不是业内还有其他更专业更成熟更快捷傻瓜高效优雅的方法,以下仅仅是自己的一点摸索罢了。

TODOs:

  1. 生成字典文件—— 提取项目中需要显示的所有汉字。
  2. 根据字典生成减肥过的字库文件—— webFont。

本篇主要实现字典文件的生成。用了python来写,主要的技术要求如下。

  • 批量扫描.js,.php,.html三种格式文件中的汉字
  • 源码中的注释需要排除过滤掉,因为当中包含了大量汉字但并不需要在显示
  • 对提取出来的汉字还需要做一次去重的处理,保存成txt格式字典文件备用

以下是源码

import os
import re

contents = ''
inp_path = './input' #扫描目录
filelist = os.listdir(inp_path)
for dfile in filelist:
    if dfile[-4:].lower() == ".php" or dfile[-3:].lower() == ".js" or dfile[-5:].lower() == ".html": #目标文件
        print("processing", dfile)
        fcontent = ''  # 按文件分开处理
        f = open(inp_path+'/'+dfile, 'r', encoding='utf-8')
        lines = f.readlines()
        #去除注释
        for line in lines:
            parts = line.split("//")
            fcontent += ''.join(re.findall('[\u4e00-\u9fa5]', parts[0].strip())) #筛出汉字部分
        contents += ''.join(set(fcontent))

#完整字典再去一次重
contents = ''.join(set(contents))

#写入字典文件
dict = open("ttfdict.txt", 'w', encoding='utf-8')
dict.write(contents)
dict.close()

print(len(contents), contents)
exit()

把需要扫描的文件放到 input/ 路径下,执行后生成 ttfdict.txt 字典文件

QQ截图20200125101600.png

QQ截图20200125101938.png

去重后文字顺序打乱了,不过没关系不影响压缩。

我的一份文案材料,4530个字的长度,经过整理后,输出字典文字 880个。相比 GKB字符集2万余汉字,可预见压缩后字库有明显的缩小。

标签: python, ttf, 字典, TrueType, 压缩, 字体

添加新评论