背景
高保真數(shù)據(jù)可視化大屏頁面，設(shè)計部同學(xué)在提供UI圖的同時還會提供UI圖中使用到的字體文件，例如：思源字體、微軟雅黑等類型的字體。前端需要在CSS中定義自定義字體即可和UI圖字體保持一致。但是，通常來說UI提供的字體包都很大，大都在十幾M，加載非常緩慢，嚴(yán)重影響用戶體驗。toB產(chǎn)品沒有CDN，只能從字體文件本身去做優(yōu)化操作。
優(yōu)化策略：
- 使用壓縮率更高的字體類型（推薦woff2格式）。
- 刪除生僻字以及不常見的特殊字符。
基礎(chǔ)環(huán)境
為了避免因為基礎(chǔ)環(huán)境不一致而產(chǎn)生意料之外的問題，基礎(chǔ)環(huán)境要盡可能保持一致。
| 依賴 |
版本 |
說明 |
| node.js |
14.21.2 |
推薦14lts |
| @hayes0724/web-font-converter |
1.0.5 |
常見字體轉(zhuǎn)換 |
| font-spider |
1.3.5 |
過濾字體數(shù)據(jù) |
| ttc2ttf |
1.0.96 |
ttc轉(zhuǎn)ttf格式，@hayes0724/web-font-converter的補充工具。 |
安裝壓縮工具
npm install -g font-spider ttc2ttf @hayes0724/web-font-converter字體文件轉(zhuǎn)換為ttf格式
源文件：思源黑體.otf
font-spider 只壓縮ttf格式的字體文件，所以要先將otf轉(zhuǎn)ttf
如果源字體文件是 ttc 格式則可以通過 ttc2ttf 轉(zhuǎn)為 ttf 格式
# 源字體文件 otf 格式
font-convert --pathIn='./SourceHanSansCN-Bold.otf' --pathOut='./SourceHanSansCN-Bold.ttf'
# 源字體文件 ttc 格式
# 在 msyhsb001.ttc 文件目錄下執(zhí)行
ttc2ttf ./msyhsb001.ttc ./壓縮字體文件
字體文件體積大的原因主要是中文有上萬個字體，可是常見的中文字體只有3000個左右，刪除特殊字符以及生僻字，可以大大減小字體文件的體積。
# 新建 font.html
# 在 div.text3 元素中添加常見字體
# 執(zhí)行以下命令
font-spider ./font.html
# 輸出結(jié)果可查看字體已經(jīng)被壓縮切大小只有 1039.424 KB
ttf格式轉(zhuǎn)woff2格式
源文件大小8.6M，經(jīng)過刪除生僻字以及轉(zhuǎn)為woff2格式后文件大小為552KB。文章來源：http://www.zghlxwxcb.cn/news/detail-840294.html
font-convert --pathIn='./SourceHanSansCN-Bold.ttf' --pathOut='./SourceHanSansCN-Bold.woff2'驗證
從上圖可以看出，字體壓縮比確實是高達93%，對比網(wǎng)絡(luò)加載速度，同樣6M帶寬字體文件由原來的18s到目前的500ms，用戶訪問網(wǎng)頁帶來飛升一般的體驗。文章來源地址http://www.zghlxwxcb.cn/news/detail-840294.html
到了這里，關(guān)于純前端字體文件優(yōu)化實踐，字體文件壓縮93%!的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
