记一次使用 fontTools 优化网页字体（字体文件大小）

原创

Im小泽

发布于 2023-07-19 21:20:08

6050

发布于 2023-07-19 21:20:08

一直以来，本站使用的是 HarmonyOS Sans 字体，但由于中文字体文件过大（约 4.3 MB），导致网页加载速度缓慢，不利于弱网环境下的访问。因此，本文将介绍如何使用 fontTools 中的 pyftsubset 对网页字体进行切片，以优化网页字体文件大小。

安装依赖

使用前需要安装 Python 3,fontTools 以及 woff2

安装 Python 3

Python3 一般系统都有自带，如果没有，可以使用以下命令安装：

# Debian/Ubuntu
apt install python3

安装 fontTools

安装完成后，使用以下命令安装 fontTools：

pip3 install fontTools
# 在一些版本的 Debian/Ubuntu 系统中，可能需要使用以下命令
apt install python3-fonttools

一些系统可能需要使用 pip 命令，具体可自行尝试。

安装 woff2

在对字体文件进行切片后，需要将字体文件转换为 woff2 格式，因此需要安装 woff2 工具：

# 安装依赖
## Debian 11或12
apt update
apt install build-essential ca-certificates zlib1g-dev libpcre3 libpcre3-dev tar unzip libssl-dev wget curl git cmake ninja-build mercurial libunwind-dev pkg-config libbrotli-dev
## Ubuntu 22.04或20.04
sudo su
cd /root
apt update
apt install build-essential ca-certificates zlib1g-dev libpcre3 libpcre3-dev tar unzip libssl-dev wget curl git cmake ninja-build mercurial libunwind-dev pkg-config libbrotli-dev
# 编译安装 woff2
git clone https://github.com/google/woff2.git
cd woff2
mkdir out
cd out
cmake ..
make
make install
# 设置环境变量
export PATH=$PATH:/root/woff2/out

使用方法

上传字体文件

新建一个文件夹，将需要切片的字体文件放入其中：

mkdir fonts
cd fonts

切片并转换为 woff2 格式

本文使用的是 HarmonyOS Sans 字体，字体文件名为 HarmonyOS_Sans_SC_Regular.ttf，使用以下命令进行切片：

注意：
1.如您使用的是其他字体，请将命令复制到编辑器，并将命令中的 HarmonyOS_Sans_SC_Regular 替换为您的字体名称。
2.本文切片 unicode 参照了 Google Fonts 的 CSS 文件。
3.更多使用方法请参考https://fonttools.readthedocs.io/en/latest/subset/index.html。
4.以下命令仅适用于中文简体。
5.不要一次性将命令复制到终端执行，请先测试一下，再逐步执行。

代码放不下了，请移步：切片并转换为WOFF2格式

pyftsubset HarmonyOS_Sans_SC_Regular.ttf --output-file=HarmonyOS_Sans_SC_Regular.4.ttf  --unicodes='U+1f1e9-1f1f5, U+1f1f7-1f1ff, U+1f21a, U+1f232, U+1f234-1f237, U+1f250-1f251, U+1f300, U+1f302-1f308, U+1f30a-1f311, U+1f315, U+1f319-1f320, U+1f324, U+1f327, U+1f32a, U+1f32c-1f32d, U+1f330-1f357, U+1f359-1f37e'
woff2_compress HarmonyOS_Sans_SC_Regular.4.ttf
pyftsubset HarmonyOS_Sans_SC_Regular.ttf --output-file=HarmonyOS_Sans_SC_Regular.5.ttf  --unicodes='U+fee3, U+fef3, U+ff03-ff04, U+ff07, U+ff0a, U+ff17-ff19, U+ff1c-ff1d, U+ff20-ff3a, U+ff3c, U+ff3e-ff5b, U+ff5d, U+ff61-ff65, U+ff67-ff6a, U+ff6c, U+ff6f-ff78, U+ff7a-ff7d, U+ff80-ff84, U+ff86, U+ff89-ff8e, U+ff92, U+ff97-ff9b, U+ff9d-ff9f, U+ffe0-ffe4, U+ffe6, U+ffe9, U+ffeb, U+ffed, U+fffc, U+1f004, U+1f170-1f171, U+1f192-1f195, U+1f198-1f19a, U+1f1e6-1f1e8'
woff2_compress HarmonyOS_Sans_SC_Regular.5.ttf
pyftsubset HarmonyOS_Sans_SC_Regular.ttf --output-file=HarmonyOS_Sans_SC_Regular.6.ttf  --unicodes='U+f0a7, U+f0b2, U+f0b7, U+f0c9, U+f0d8, U+f0da, U+f0dc-f0dd, U+f0e0, U+f0e6, U+f0eb, U+f0fc, U+f101, U+f104-f105, U+f107, U+f10b, U+f11b, U+f14b, U+f18a, U+f193, U+f1d6-f1d7, U+f244, U+f27a, U+f296, U+f2ae, U+f471, U+f4b3, U+f610-f611, U+f880-f881, U+f8ec, U+f8f5, U+f8ff, U+f901, U+f90a, U+f92c-f92d, U+f934, U+f937, U+f941, U+f965, U+f967, U+f969, U+f96b, U+f96f, U+f974, U+f978-f979, U+f97e, U+f981, U+f98a, U+f98e, U+f997, U+f99c, U+f9b2, U+f9b5, U+f9ba, U+f9be, U+f9ca, U+f9d0-f9d1, U+f9dd, U+f9e0-f9e1, U+f9e4, U+f9f7, U+fa00-fa01, U+fa08, U+fa0a, U+fa11, U+fb01-fb02, U+fdfc, U+fe0e, U+fe30-fe31, U+fe33-fe44, U+fe49-fe52, U+fe54-fe57, U+fe59-fe66, U+fe68-fe6b, U+fe8e, U+fe92-fe93, U+feae, U+feb8, U+fecb-fecc, U+fee0'
woff2_compress HarmonyOS_Sans_SC_Regular.6.ttf
pyftsubset HarmonyOS_Sans_SC_Regular.ttf --output-file=HarmonyOS_Sans_SC_Regular.21.ttf  --unicodes='U+9f3d-9f3e, U+9f41, U+9f4a-9f4b, U+9f51-9f52, U+9f61-9f63, U+9f66-9f67, U+9f80-9f81, U+9f83, U+9f85-9f8d, U+9f90-9f91, U+9f94-9f96, U+9f98, U+9f9b-9f9c, U+9f9e, U+9fa0, U+9fa2, U+9ff4, U+a001, U+a007, U+a025, U+a046-a047, U+a057, U+a072, U+a078-a079, U+a083, U+a085, U+a100, U+a118, U+a132, U+a134, U+a1f4, U+a242, U+a4a6, U+a4aa, U+a4b0-a4b1, U+a4b3, U+a9c1-a9c2, U+ac00-ac01, U+ac04, U+ac08, U+ac10-ac11, U+ac13-ac16, U+ac19, U+ac1c-ac1d, U+ac24, U+ac70-ac71, U+ac74, U+ac77-ac78, U+ac80-ac81, U+ac83, U+ac8c, U+ac90, U+ac9f-aca0, U+aca8-aca9, U+acac, U+acb0, U+acbd, U+acc1, U+acc4, U+ace0-ace1, U+ace4, U+ace8, U+acf3, U+acf5, U+acfc-acfd, U+ad00, U+ad0c, U+ad11, U+ad1c, U+ad34, U+ad50, U+ad64, U+ad6c, U+ad70, U+ad74, U+ad7f, U+ad81, U+ad8c, U+adc0, U+adc8, U+addc, U+ade0, U+adf8-adf9, U+adfc, U+ae00, U+ae08-ae09, U+ae0b, U+ae30, U+ae34, U+ae38, U+ae40, U+ae4a, U+ae4c, U+ae54, U+ae68, U+aebc, U+aed8, U+af2c-af2d, U+af34'
woff2_compress HarmonyOS_Sans_SC_Regular.21.ttf

对应的 CSS 样式文件

注意：如您使用的是其他字体，请将代码复制到编辑器，并将 CSS 中的 HarmonyOS_Sans_SC_Regular 和 HarmonyOSSans-Regular 替换为您的字体名称。

代码放不下了，请移步：对应的 CSS 样式文件

body {
  -webkit-font-smoothing: antialiased;
}
/* [4] */
@font-face {
  font-family: 'HarmonyOSSans-Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(?HarmonyOS_Sans_SC_Regular.4.woff2) format('woff2');
  unicode-range: U+1f1e9-1f1f5, U+1f1f7-1f1ff, U+1f21a, U+1f232, U+1f234-1f237, U+1f250-1f251, U+1f300, U+1f302-1f308, U+1f30a-1f311, U+1f315, U+1f319-1f320, U+1f324, U+1f327, U+1f32a, U+1f32c-1f32d, U+1f330-1f357, U+1f359-1f37e;
}
/* [5] */
@font-face {
  font-family: 'HarmonyOSSans-Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(?HarmonyOS_Sans_SC_Regular.5.woff2) format('woff2');
  unicode-range: U+fee3, U+fef3, U+ff03-ff04, U+ff07, U+ff0a, U+ff17-ff19, U+ff1c-ff1d, U+ff20-ff3a, U+ff3c, U+ff3e-ff5b, U+ff5d, U+ff61-ff65, U+ff67-ff6a, U+ff6c, U+ff6f-ff78, U+ff7a-ff7d, U+ff80-ff84, U+ff86, U+ff89-ff8e, U+ff92, U+ff97-ff9b, U+ff9d-ff9f, U+ffe0-ffe4, U+ffe6, U+ffe9, U+ffeb, U+ffed, U+fffc, U+1f004, U+1f170-1f171, U+1f192-1f195, U+1f198-1f19a, U+1f1e6-1f1e8;
}

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css