本文主要描述了如何为你的博客加载你喜欢的 CJK 字体。
整体上就是用博客中用到的所有字体来裁剪字体文件，从而加快加载速度，使 CJK 字体做到随网页加载的能力。
下面介绍了一个 python 脚本用来实现该目标。用到的工具主要是 fonttools 1。
1. 获取全部字符
获取文件我选择了最简单的方式，遍历当前目录下的所有 html 文件，将其中的所有字符组成一个 set.
实现大概如下：
def file_walk_recursively(directory, file_filter): all_files = [] for root, dirs, files in os.walk(directory): for file in files: file_path = os.path.join(root, file) if file_filter(file_path): all_files.append(file_path) for dir in dirs: dir_path = os.path.join(root, dir) all_files.extend(file_walk_recursively(dir_path, file_filter)) return all_files def get_chars_from_file(filepath): with open(filepath, "r", encoding="utf-8") as f: text = f.read() char_set = set(text) return char_set def file_all_chars(directory, file_filter) -> str: files=file_walk_recursively(directory, file_filter) chatsets=[get_chars_from_file(f) for f in files] all_chars=set().union(*chatsets) s="".join(all_chars) print(s) return s
2. 构建 subsetter 并写入新字体
主要使用的是 fonttools 提供的 pyftsubset2。这个工具存在一个命令行版本，但是因为我使用 python 实现的，所以选择了直接调用 python 库的形式。
下面是如何构建 subsetter。
subsetter = Subsetter() subsetter.options.recommended_glyphs = True subsetter.populate(text=all_chars)
下面是如何裁剪并写入到文件中。
font = load_font(font_path, subsetter.options, dontLoadGlyphNames=False) subsetter.subset(font) out = os.path.join(out_directory, font_info.filename) save_font(font, out, subsetter.options) css_str += font_info.to_css_block()
3. 生成 css 文件
仅仅裁剪字体文件并不能应用到我们的网页中，我们还需要将这个字体文件引入到 css 中。
我们同样使用 fonttools 来获取字体信息。
def get_font_info(filepath: str) -> FontInfo: font = ttLib.TTFont(filepath) name_table = font['name'] os2_table = font['OS/2'] font_family_name = None for record in name_table.names: if record.nameID == 1 and record.platformID == 3 and record.platEncID == 1: font_family_name = record.string.decode('utf-8') break font_style = None for record in name_table.names: if record.nameID == 2 and record.platformID == 3 and record.platEncID == 1: font_style = record.string.decode('utf-8').lower() if "italic" in font_style: font_style = "italic" break if font_style is None: font_style = "regular" font_weight = None if hasattr(os2_table, 'usWeightClass'): us_weight_class = os2_table.usWeightClass font_weight = us_weight_class file_name = os.path.basename(filepath) return FontInfo(family=font_family_name,style = font_style,weight = font_weight, filename=file_name)
然后生成如下的 css block。
@font-face { font-family: "IBM Plex Mono Text"; font-style: regular; font-weight: 450; font-display: swap; src: url("./IBMPlexMono-Text.ttf"); }
其中 font-display: swap; 意思是非阻塞加载字体，当字体加载完成后再切换回该字体3。
4. 在其他 css 文件中引用该 css 文件
@import url(fontfaces.css);
5. 结果比较
可以看到字体大小从 14M 减少到了 217K。
-rw-r--r-- 1 chin chin 217K Nov 3 19:05 ./static/fontfaces/ClearHansSerif.ttf -rw-r--r-- 1 chin chin 14M Nov 2 11:41 ./resources/ClearHansSerif.ttf