字体压缩指南 #103
HiPeach
started this conversation in
Show and tell
Replies: 2 comments
-
|
Pacifico |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
前言
众所周知，该项目使用了三种字体，彼此分别有不同的用途
Pacifico-Regular主页的 Logo 字体UnidreamLED时钟数字字体HarmonyOS Sans主页其他部分默认字体工具
首先，介绍一下需要用到的工具
Fontmin这是一个纯 JavaScript 字体子集化方案，并且同时支持命令行操作及图形化界面，本教程仅介绍图形化界面操作方式
该项目在Github上开源，作者为@ecomfe，如果觉得不错可以去给作者点个
Star去项目官网下载适合自己的客户端文件，解压得到程序本体
使用
双击打开上一步解压得到的程序本体，如下图所示
将需要压缩的字体文件拖到左下角，并在左栏输入需要保留的文字片段
注意：压缩过后的字体仅保留左栏输入的字符
最后点击生成，将跳出字体所在文件夹，按需保存即可
注意：压缩完成的字体文件保存在缓存目录，请确保保存好字体再关闭程序，否则可能造成字体丢失
压缩
现在按顺序开始进行字体压缩
首先是
Pacifico-Regular，即主页的 Logo 字体，点此下载完整字体文件将字体文件拖到程序左下角，在左栏输入
用生成的字体替换
[Root]public/font/Pacifico-Regular.ttf接着是
UnidreamLED，即时钟数字字体，该字体源文件在[Root]public/font/UnidreamLED.ttf将字体文件拖到程序左下角，在左栏输入
用生成的字体替换
[Root]public/font/UnidreamLED.ttf最后，
HarmonyOS Sans已经经过压缩，并采用了字体拆分，只是作者网站有防盗链，需要更换引入地址用VSCode或记事本等软件打开
index.html并编辑完成
恭喜，大功告成
我们来对比一下成果（可能会小有出入）
Pacifico-Regular主页的 Logo 字体源文件：308KB → 压缩后：6KB
UnidreamLED时钟数字字体源文件：31KB → 压缩后：4KB
可以看到提升还是很明显的，教程到此结束，祝你顺利！
Beta Was this translation helpful? Give feedback.
All reactions