Web Font 終極解決方案

Web Font 終極解決方案

絕大多數情況下,我們在網頁開發中都要使用 Web 安全字體,高傲的設計師肯定不侷限於安全字體。

那麼問題來了:我們如何保證客戶端對字體的顯示一致性,本文對此進行深入探討。

Web Font 終極解決方案

我們從頭說起,設計師要求使用蘋方字體,可是這並不是一個web安全字體。

這意味著,如果客戶端沒有該字體庫,那麼我們的用戶將看到一些默認字體,這違背了我們最初“顯示一致性”的美好願景。

怎麼辦,關於這個問題,我做出了以下嘗試。

一、查找方案

不是什麼大問題,先搜索一下,很快我查到了某中文字庫,大致用法如下:

嵌入如下js代碼片段:

Web Font 終極解決方案

效果是達到了,可是當看到要收費的時候,我已經不愛你了。第三方的方案還要收費,顯然並不完美

那怎麼辦,一定還有其他方案,我們繼續搜索。

二、下載字體

Web Font 終極解決方案

找個免費的試試?好吧,去下載蘋方字體,我自己引入字體包

歷盡千辛萬苦,總算找到了一個蘋方字體庫。下載之後發現文件後綴是 ttf,瀏覽器中加載不出來。。。

可以從css的使用方式中看出端倪:

Web Font 終極解決方案

於是乎,我又想著有沒有一個在線工具可以將 ttf 轉化成 woff,那這樣問題就迎刃而解了。

三、字體轉換

Web Font 終極解決方案

找了一圈,大致問題如下:

1.文件太大的不能轉換(下載到的蘋方 ttf 為 11M );

2.只支持英文轉換,中文的字體不能轉換;

3.可以轉換,但需要付費下載的;

四、終級解決方案

Web Font 終極解決方案

真是太失望了,不就是想轉換一下字體嗎,沒一個靠譜的。那我自己來搞,是時候展現真正的技術了~

大致思路如下,這裡我藉助了開源項目 fontmin(傳送門):

1.加載fontmin;

2.指定轉換文件,並指定輸出目錄,如果沒有則創建;

3.轉換為eot、woff以及svg格式輸出;

4.svg格式文件較大,藉助imagemin(傳送門)對其進行壓縮處理,之後輸出;

五、快速開始

Web Font 終極解決方案

我們創建 index.js,如下:

Web Font 終極解決方案

代碼很簡單,大概過一下:

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 左右,那麼我們網頁引用,會不會加載不起來呢?

那如果我們追求極致的體驗呢,如何對字體壓縮?也就是精簡字體包,那該如何操作?

六、字體精簡與壓縮

Web Font 終極解決方案

關於字體壓縮,我找到了這個:

字蛛是一個智能 WebFont 壓縮工具,它能自動分析出頁面使用的 WebFont 並進行按需壓縮。

我們先來安裝:

Web Font 終極解決方案

找到 html 文件目錄,運行:

Web Font 終極解決方案

注意:字蛛會分析頁面使用的 webfont,也就意味著他只抓取靜態頁面的 font

七、總結

Web Font 終極解決方案

到這裡,我們總算達到了目的,成功將蘋方字體轉換成了 Web 安全字體。回顧一下過程

1.首先下載你需要的字體文件,一般會是 ttf 格式;

2.將 ttf 文件轉換成 eot,woff,svg 等 web 支持字體;

3.壓縮精簡字體,達到優化加載目的;

是不是很簡單,通過轉換,理論上,你可以使用任何字體哦~

1.

2.

3.

Web Font 終極解決方案


分享到:


相關文章: