笑掉大牙：UI给的字体包21M，还让我压缩？最终才发现全是坑！

前端

2023-06-29 02:50:45

史上最让人头疼的UI：压缩字体包的曲折之旅

前言

作为一个前端程序员，我最近接手了一个uniapp开发的h5项目。让我抓狂的是，UI提供的字体包足足有21M！更让我无语的是，他们还要求我压缩字体包。这可真是让我头大，但为了项目进度，只好硬着头皮上了。

第一步：下载安装压缩工具

既然UI要求压缩字体包，那就只好硬着头皮上了。首先，我下载安装了一个压缩工具，推荐使用在线工具「Compressjpeg」。它可以轻松压缩各种格式的图片和字体。

第二步：字体文件转换为ttf格式

将字体文件转换为ttf格式是压缩字体包的第一步。可以借助「FontForge」或「Glyphs」等工具来完成。注意，源字体文件必须是otf格式，且文件路径一定要写对。

第三步：过滤字体数据

转换好字体格式后，需要过滤掉字体数据中不必要的部分。可以使用「fontmake」工具来完成。具体步骤如下：

新建一个font.html文件，在div.text3元素中添加常见字体。
执行以下命令：

fontmake -m '{"glyphs": ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ".", ",", "!", "?", "-", "_", "=", "+", "*", "/", "\\", "|", ":", ";", "(", ")", "[", "]", "{", "}", "<", ">", "@", "#", "fontmake -m '{"glyphs": ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ".", ",", "!", "?", "-", "_", "=", "+", "*", "/", "\\", "|", ":", ";", "(", ")", "[", "]", "{", "}", "<", ">", "@", "#", "$", "%", "^", "&", "~"]}' font.ttf output.ttf
quot;, "%", "^", "&", "~"]}' font.ttf output.ttf