• 最近一直在折腾这小博客，无意间发现一款很好看的字体，但奈何体积太大
  • 查阅了不少文档，最终找到了解决办法，顺便分享给各位读者

格式介绍

  • 先拓展一下常见的字体格式以及区别
  1. Woff：Woff是一种高效的字体压缩格式，专门用于网页。Woff独有的特点是可以通过快速地压缩和解压缩技术提高网络字体传输的效率，降低网络带宽压力。因此，Woff字体被广泛应用于各类在线站点和平台。
  2. Woff2：Woff22是Web Open Font Format 2.0的缩写，相比于Woff 1.0，Woff2格式可以将字体文件压缩率进一步提升达到30%以上，同时支持更多的OpenType字体特性，提高了字体的质量和可用性。
  3. TrueType（TTF）：TTF字体是由Apple和Microsoft为PostScript而开发的字体格式。常用于Mac和Windows操作系统上，TTF一直是最常见的格式，所有主流浏览器都支持它。然而，IE8不支持TTF，且IE9上只有被设置成“installable”才能支持。TTF和OTF字体是没压缩的，因此文件体积大。
  4. ​OpenType（OTF）：与TTF相比，OTF字体支持更多的高级特性，如连字、分数、上下文特定的大写和小写形式等。
  5. ​Webdings：这是一种用于网页的特殊字体，包含了各种各样的符号和图形。
  6. Eot（Embedded Open Type）：微软创造的字体格式，这种格式只在IE6-IE8里使用。

体积压缩

  • 如果我们全站使用同一种字体，那么我们可能需要同时加载 Regular、Medium、Bold 等不同字重的文件，但拿鸿蒙字体举例：HarmonyOS_Sans_SC_Regular.ttf 大小高达 8MB，如果不对字体文件进行压缩，将极大增加网页加载速度，严重影响用户体验。
  • WOFF2 获得了广泛的浏览器支持和最佳压缩效果，比 Woff 高出 30%。文件压缩可加快下载速度。Woff2 格式通常是现代浏览器实现完全兼容性所需的唯一格式
    只有在需要支持旧版浏览器时，您才可能需要使用其他格式（例如 Woff、Eot 和 TTF）。 如果您不需要支持旧版浏览器，则没有理由依赖 Woff2 以外的网页字体格式。

压缩方法

字体去繁

  • GBK 结尾的字体偏大的原因是包含庞大的繁体字库，大多数网页并不需要，可以使用Python中 fontTools 得到字体的简体中文子集

  • 先看一下Unicode表

    字符集字数Unicode 编码
    基本汉字20902字4E00-9FA5
    基本汉字补充74字9FA6-9FEF
    扩展A6582字3400-4DB5
    扩展B42711字20000-2A6D6
    扩展C4149字2A700-2B734
    扩展D222字2B740-2B81D
    扩展E5762字2B820-2CEA1
    扩展F7473字2CEB0-2EBE0
    扩展G4939字30000-3134A
    康熙部首214字2F00-2FD5
    部首扩展115字2E80-2EF3
    兼容汉字477字F900-FAD9
    兼容扩展542字2F800-2FA1D
    PUA(GBK)部件81字E815-E86F
    部件扩展452字E400-E5E8
    PUA增补207字E600-E6CF
    汉字笔画36字31C0-31E3
    汉字结构12字2FF0-2FFB
    汉语注音43字3105-312F
    注音扩展22字31A0-31BA
    〇1字3007
  • 基本汉字（4E00-9FA5）区间内，简体字、繁体字是交叉的，没有一个固定的简体区间和繁体区间，所以需要一个简体字的 Unicode 表，经过整理，得到unicodes 文件，再加入 latin 的区间（0000-00FF），以及

    中文标点符号Unicode编码

    十进制（从小到大）li2 = [ 8211, 8212, 8216, 8217, 8220, 8221, 8230...
    作为参数传入 fontTools 获得字体子集。
  • 下载 Unicode编码文件

此处内容需要评论回复后（审核通过）方可阅读。

  • 利用Python中Fonttools库可以进行取子集
  • 先把 Unicode编码文件和ttf字体放入一个文件夹中
  • 命令进入该目录，安装相关python库
pip install fonttools brotli
  • 介绍一下该工具使用方法
pyftsubset <PATH> --unicodes-file=<PATH> --with-zopfli --flavor=woff2

# 参数
# pyftsubset <PATH>        # 待压缩字体文件路径或者当前目录字体名
# --unicodes-file=<PATH>   # unicode.txt 文件路径
# --with-zopfli            # 使用 Google 压缩算法
# --flavor=<TYPE>          # 输出字体格式
  • pyfsubset可以完成整个流程，直接使用以下命令
pyftsubset fonts.ttf  --unicodes-file=sc_unicode.txt --with-zopfli --flavor=woff2
  • 得到最终压缩fonts.subset.woff2文件

字体压缩

  • 字体压缩也可以使用Google的woff2工具，可实现对ttf格式文件压缩转换和对woff2格式解压缩
    谷歌/WOFF2 (github.com)
    Linux下演示
yumt install -y git g++ make
git clone --recursive https://github.com/google/woff2.git  
cd woff2
make clean all
./woff2_compress fonts.ttf //压缩fonts.ttf文件为woff2格式
./woff2_decompress fonts.woff2  //解压woff2文件为ttf格式

woff2 Win版

  • 利用google woff2代码打包得win版本，使用方法与linux中相同

  • 下载地址

此处内容需要评论回复后（审核通过）方可阅读。

分片处理

  • 我们可对字体进行分片切割处理，再部署到cdn节点上，这样可以实现在更短时间内加载完字体
  • 在线分割工具，上传ttf文件可分割转换成多个woff2文件
  1. 在线字体分包器 - 免费帮助你将字体部署到网站上 (chinese-font.netlify.app)
  2. KonghaYao/cn-font-split: 划时代的字体切割工具，CJK与任何字符！支持 otf、ttf、woff2 字体多线程切割，完美地细颗粒度地进行包大小控制。A revolutionary font subetter that supports CJK and any characters! It enables multi-threaded subset of otf, ttf, and woff2 fonts, allowing for precise control over package size. (github.com)

格式转换

  • ttf转woff2可利用上述两种方法，也可采用在线转换

1.TTF to WOFF2 | CloudConvert
2.在线字体转换,字体格式转换器|ttf转otf,ttf转woff,ttf转woff2,ttf转eot,ttf转svg,otf转ttf,otf转woff,otf转woff2,otf转eot,otf转svg,woff转ttf,woff转otf,woff转woff2,woff2转ttf,woff2转otf,woff2转woff,dfont转ttf,dfont转otf,pfa转ttf,pfa转otf,pfb转ttf,pfb转otf - 在线工具 - 字客网 (fontke.com)
3.字体转换器 (在线自由) — Convertio

© Reprint prohibited