This repository was archived by the owner on May 29, 2025. It is now read-only.
字体压缩指南 #103
HiPeach
started this conversation in
Show and tell
Replies: 2 comments
-
|
感谢大佬 🎉 |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
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
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
前言
众所周知，该项目使用了三种字体，彼此分别有不同的用途
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