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

2023-07-19 21:20:08 浏览数 (1)

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

安装依赖

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

安装 Python 3

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

代码语言:shell复制
# Debian/Ubuntu
apt install python3

安装 fontTools

安装完成后,使用以下命令安装 fontTools:

代码语言:shell复制
pip3 install fontTools
# 在一些版本的 Debian/Ubuntu 系统中,可能需要使用以下命令
apt install python3-fonttools

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

安装 woff2

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

代码语言:shell复制
# 安装依赖
## 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

使用方法

上传字体文件

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

代码语言:shell复制
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格式

代码语言:shell复制
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_RegularHarmonyOSSans-Regular 替换为您的字体名称。

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

代码语言: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;
}

0 人点赞