絕大多數情況下,我們在網頁開發中都要使用 Web 安全字體,高傲的設計師肯定不侷限於安全字體。
那麼問題來了:我們如何保證客戶端對字體的顯示一致性,本文對此進行深入探討。
我們從頭說起,設計師要求使用蘋方字體,可是這並不是一個web安全字體。
這意味著,如果客戶端沒有該字體庫,那麼我們的用戶將看到一些默認字體,這違背了我們最初“顯示一致性”的美好願景。
怎麼辦,關於這個問題,我做出了以下嘗試。
一、查找方案
不是什麼大問題,先搜索一下,很快我查到了某中文字庫,大致用法如下:
嵌入如下js代碼片段:
效果是達到了,可是當看到要收費的時候,我已經不愛你了。第三方的方案還要收費,顯然並不完美。
那怎麼辦,一定還有其他方案,我們繼續搜索。
二、下載字體
找個免費的試試?好吧,去下載蘋方字體,我自己引入字體包。
歷盡千辛萬苦,總算找到了一個蘋方字體庫。下載之後發現文件後綴是 ttf,瀏覽器中加載不出來。。。
可以從css的使用方式中看出端倪:
於是乎,我又想著有沒有一個在線工具可以將 ttf 轉化成 woff,那這樣問題就迎刃而解了。
三、字體轉換
找了一圈,大致問題如下:
1.文件太大的不能轉換(下載到的蘋方 ttf 為 11M );
2.只支持英文轉換,中文的字體不能轉換;
3.可以轉換,但需要付費下載的;
四、終級解決方案
真是太失望了,不就是想轉換一下字體嗎,沒一個靠譜的。那我自己來搞,是時候展現真正的技術了~
大致思路如下,這裡我藉助了開源項目 fontmin(傳送門):
1.加載fontmin;
2.指定轉換文件,並指定輸出目錄,如果沒有則創建;
3.轉換為eot、woff以及svg格式輸出;
4.svg格式文件較大,藉助imagemin(傳送門)對其進行壓縮處理,之後輸出;
五、快速開始
我們創建 index.js,如下:
代碼很簡單,大概過一下:
1.我們選擇要處理的字體:PingFang-Light.ttf
2.將 ttf 轉換成 eot 格式;
3.將 ttf 轉換成 woff 格式;
4.將 tff 轉換成 svg 格式;
5.由於 svg 文件較大,通過 svgo 進行優化輸出;
6.異常捕獲處理;
Demo 地址:
https://github.com/chenfengyanyu/web-font-convert
到這裡,我覺得還有瑕疵。ttf 大小為 11M,轉換的 woff 大小為 7M 左右,那麼我們網頁引用,會不會加載不起來呢?
那如果我們追求極致的體驗呢,如何對字體壓縮?也就是精簡字體包,那該如何操作?
六、字體精簡與壓縮
關於字體壓縮,我找到了這個:
字蛛是一個智能 WebFont 壓縮工具,它能自動分析出頁面使用的 WebFont 並進行按需壓縮。
我們先來安裝:
找到 html 文件目錄,運行:
注意:字蛛會分析頁面使用的 webfont,也就意味著他只抓取靜態頁面的 font
七、總結
到這裡,我們總算達到了目的,成功將蘋方字體轉換成了 Web 安全字體。回顧一下過程:
1.首先下載你需要的字體文件,一般會是 ttf 格式;
2.將 ttf 文件轉換成 eot,woff,svg 等 web 支持字體;
3.壓縮精簡字體,達到優化加載目的;
是不是很簡單,通過轉換,理論上,你可以使用任何字體哦~
1.
2.
3.
閱讀更多 F2EAwesome 的文章