2019年1月11日

網頁是否安裝思源黑體、中文字型的考量﹍影響載入速度的因素及作法分析

網頁是否安裝思源黑體、中文字型的考量﹍影響載入速度的因素及作法分析

Wayne Fu 0 A+
過去在「網頁中文字型除了微軟正黑體, 還有這些好選擇!」曾提過,網頁若使用「作業系統」以外的字體,由於中文字型檔案太大,會影響網頁載入速度。

後來 Google Fonts 免費讓「讓思源黑體可直接外連」,使用 Google 的 CDN 伺服器肯定比自己找網頁空間的連線速度快,漸漸也越來越多站長在網站使用思源黑體。

這些年來網頁技術不斷翻新,以往載入中文字型的不便逐漸得到抒解,例如網路傳輸速度的進步、外部字型未載入之前先顯示預設字型等等,似乎在網頁上使用「非作業系統」字型看到了希望。

不過從這些簡單推導就驟下結論是危險的,本篇還是進行了多方深入研究及測試,整理出一些看法讓站長們評估後做決定。

(圖片出處: Google Fonts)


一、安裝方式


1. 引用字型檔

請參考「思源黑體」官網:


最簡單的引用方式,在範本中 </head> 的前一行,插入官方提供的引用連結:

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC" rel="stylesheet"/>


2. 設定字型 CSS

網頁想要使用「思源黑體」的那個區塊,設定以下 CSS 即可:

font-family: 'Noto Sans TC', sans-serif;

詳細的設定範例,可參考「網頁中英文字型跨平台設定最佳化」→「六、依網頁不同區塊設定 font-family」



二、優化載入方式


試著將以上語法裝在測試網頁上跑跑看,設定文章區塊使用思源黑體,結果第一次執行就看到悲劇,整個網頁就只有文章區塊一片空白,等待幾秒鐘字型下載後才顯示出來,該怎麼辦呢?


1. font-display 解決空窗期現象

這篇「使用 font-display 改善與優化網站效能」說明了 CSS 新功能 font-display,例如設定 swap,就可讓思源黑體完全載入前,先顯示預設字型,不會看到一片空白了

這裡沒有很推薦設定為 fallback,雖然載入字體的時間最多只等 3 秒,但還是會有一小段空窗期。

需要注意的是,font-display 在比較新的瀏覽器版本才支援,且微軟體系都不支援 (IE、Edge)


2. 修改思源黑體 CSS

很可惜的是,拆解思源黑體的外連 CSS 檔內容後,並沒有發現 font-display 的設定:

https://fonts.googleapis.com/css?family=Noto+Sans+TC

由於 font-display 必須放在 @font-face 的括號之中,所以要實現這個功能,必須手動將這個 CSS 檔的內容複製出來,一個個在所有 @font-face 之中加入 font-display 的設定,最後將所有 CSS 內容貼到範本中,比較麻煩一些。

由於 CSS 內容太大 (超過 100k),不適合放在本篇,我另外整理了一篇「網頁安裝思源黑體﹍CSS 最佳化實作」,可直接拿程式碼套用。

希望將來 Google 把 font-display 加入 CSS 檔,或是提供參數來設定,畢竟這功能滿重要的。

2019.7.7 更新:這篇「Google Fonts and font-display」找到 Google 留下的後門,可在連結加上參數,例如使用以下語法即可自動加上 CSS 參數 display: swap:

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap" rel="stylesheet"/>


3. 思源黑體將字型檔拆分成小檔

拆解檔案的過程,發現 Google 這一點做的很棒,把一個字型檔拆成上百個小檔(這也是 CSS 內容超過 100k 的原因),他的原理可參考「讓網頁顯示特定中文字型﹍安裝實作教學」,設定了 unicode-range。

意思就是將字型檔內的所有中文字分成上百個區段,網頁上文字有用到的區段,才下載那個區段的字型檔,這樣可以避免下載整個大檔,加快網頁載入速度

同時這也可確保了網站在顯示首屏的內容時,這樣的文字量可以在讀取最少字型檔的情況下,以最快的速度顯示出思源黑體。而非首屏的文字由於暫時還不需顯示,且字型檔是動態載入,不太會影響到訪客的閱覽體驗,也就是不太會有遲滯感。


4. Google Fonts 的思源黑體、思源宋體

除了思源黑體,Google Fonts 還提供另一套免費的中文字型「思源宋體」:


經查驗過引用的字型外連,「思源宋體」一樣把字型檔拆成上百個小檔,可以加快載入速度,所以這兩者都是可以考慮使用的雲端字型

未來站長們可以持續關注 Google Fonts 是否釋出更多的中文字型,且使用同樣的字型處理技術,就能有更多的雲端中文字型選擇。



三、實測感想


Google Fonts 很久以前就發佈,字型檔因歷來版本的不同處理方式也不一樣,以下是各種不同狀況的實測心得:

1. 載入完整字型檔

最早的 Google Fonts 字型檔外連,必須一次載入完整的檔案,可能將近 10MB,例如:

https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css

網頁使用這個中文字型時,就真的是悲劇了,不但一開始一片空白,而且依照網路的速度,可能要等 10 秒鐘或更久,才能顯示這些字。

雖然瀏覽器有快取,再次進入同網站的其他頁面,就不用重新下載字型。但仍有這些缺點:

  • 網站流量來源主要是 SEO 時,代表訪客大部分都是第一次到訪,那麼初體驗都會很差。
  • 瀏覽器快取有時效、容量限制,超過時還是會重新下載
  • 習慣用無痕模式的訪客可能也要重新下載

所以我建議先閱讀中文字型外連的內容,如果沒有拆成小檔的話,就避免使用該字型


2. 沒有使用 font-display

思源黑體目前的官方連結已經拆成上百個小檔,所以適合使用。但如前所述,直接引用的話,因為沒有 font-display 參數,網頁上的文字還是會有一段時間是空白的。

根據我的實測環境,網路下載速度為光世代 6M,瀏覽器首次讀取的空白期大致為 2~3 秒內。

如果網路環境是 WiFi,時間可能會更長。


3. 有使用 font-display

目前本站的內文區塊,暫時放上思源黑體,且設定了 font-display: swap,看起來的效果還不差,會先顯示預設字型,然後很快變成思源黑體,這是最推薦的作法。



四、網頁中文字型缺點整理


雖然思源黑體最佳化的作法已經找出來了,但網頁中文字型的問題其實還很多,以下一一列出。

1. 瀏覽器字型支援度

分析思源黑體的 CSS 後,發現使用的字型檔是 woff2 格式,可參考官網說明「網頁字型最佳化」,優點為:

  • 使用最新的演算法
  • 壓縮比例更低,檔案可以更小
  • 相較之下 woff2 字型在不同字體大小,細節的平滑度可以比作業系統字型展現得更完美

那麼缺點也很致命,請參考「WOFF 2.0 - Web Open Font Format」:

  • IE 不支援
  • 瀏覽器高版本才支援
  • 行動裝置作業系統高版本才支援

代表有一部份訪客看不到 Google Fonts 提供的思源黑體。


2. 瀏覽器 CSS 支援度

如前所述,font-display 並非標準規格,新的瀏覽器版本才支援,且微軟家族不支援,所以注定會對一定比例的訪客,帶來不夠好的使用體驗。


3. 行動裝置體驗

其實行動裝置的預設字型已經滿好看了,無論是 Android 或 iOS。現在強制訪客使用思源黑體,會有這些缺點:

  • 手機的傳輸速度不比 PC,會慢一些
  • 而且很多人的機型可能很舊、會更慢
  • 手機傳輸量越少越好,額外下載中文字型是非常大的負擔
  • 畢竟現在手機的網頁載入速度佔據 SEO 很大的評分
  • 有的人手機會設定流量控管額度
  • 有的人會設定 APP 不更新以節省流量,所以瀏覽器多半不會是最新版本,就不會支援 font-display

所以行動版網頁,個人覺得避免使用特殊中文字型比較好


4. 中文 webfont 雷人記事本

以下是專業網站「要改的地方太多了,那就改天吧」做的詳細整理:

  • 免費的圓體 webfont 在 iOS 上面有雷
  • 一個黑體各自表述 → 網頁顯示效果不好預期
  • 那些被 GFW 和諧的 Webfont 們 → 特定國家會封鎖外連
  • 瀏覽器設定導致 webfont 無法顯示
  • 中文字做 CSS3 scale, skew, rotate, animation 時各種狀況
  • 第三方服務的風險 → 花了錢也不一定完美
  • 除了怕瀏覽器 render 中文字的地雷,還怕缺字 → 網頁中文字型一定比不上作業系統的字齊全


5. 其他問題

2019.1.16 補充:

使用非作業系統的中文字型,還需要小心是否為可在網頁免費使用的字型,必須詳讀字型的授權範圍,以免不小心侵權。



五、中文字型最好的作法


網頁中文字型我認為 Google Fonts 已經是 "最適" 的作法了,如果要說效果 "最好" 的方案,簡單介紹以下這幾種,第 1 個免費,後面 2 個付費。

1. 字蛛

官網:http://font-spider.org/

他的原理是自製一個字型合集,只放入某頁面會使用到的中文字,讓下載量達到最小化,可參考這篇的介紹「字蛛+发布!支持动态渲染、远程多页面字体压缩」。(剛好這個連結文字就是絕佳反例,思源黑體無法顯示簡體字,改為顯示作業系統字型)

但是除了製作上不方便,還要自己找網頁空間放,實用度低,不適合部落格,只適合形象、活動網站,這類使用文字比較固定的網站。


2. Just Font

官網收費頁面:Just Font

使用「字型合集」的相同原理,會自動抓頁面使用的中文字,讓網頁下載流量達到最低。

特點整理:

  • 有試用額度,沒有每月免費使用額度
  • 費用相對較低,最低一年 348
  • 有非常多字型可選擇


3. Adobe Fonts (Typekit)

官網:Adobe Fonts

由於 Adobe 沒有中文說明,因此請參考這篇「為網站載入 Typekit「思源黑體」中文網頁字型,提升文字顯示質感」的介紹,特點整理如下:

  • 免費版每月額度為 25000 瀏覽數,一般部落格綽綽有餘,但沒有「字型合集」的最佳化功能
  • 根據這篇「中文WebFont概況與小技巧」,付費版才有自動組成「字型合集」的功能,讓網頁下載流量達到最低
  • 一年費用至少 USD 50
  • 雖然費用比較貴,但相對而言 Adobe 是世界級的公司,相信伺服器的速度會比較快、更穩定。



六、總結


閱讀這麼多資料之後,終於可以下結論了:

  • 慎選網路中文字型 → 如果必須下載整個字型檔,建議摒棄該字型
  • 自己手動拆解 CSS 內容,務必加入 font-display: swap
  • 行動版網頁避免加載外部中文字型
  • 如果有經費的話,就付費使用雲端字型服務,畢竟費用不多,自己也省下麻煩
  • 對於商業、形象網站,使用特殊字型有加分效果,這筆投資是划算且必要的(但先請設計師做整體規劃比較好)。
  • 如果是提供資訊為主的部落格網站,只要覺得原作業系統的字體清楚、不難看,那麼沒有建議一定要使用外部字型,畢竟前端地雷太多
  • 如果網站原本外掛已經很多,載入速度已經不快了,建議別雪上加霜,讓負擔更大。
  • 如果網站是自己看了心情愉快比較重要,那麼可選擇手動自己處理字型 CSS,也可花點小錢犒賞自己。


更多「字型」相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

2 則留言:

  1. Wayne Fu 大大,我發現了你的文章好像有不太對的地方。
    Google其實有提供[font-display: swap]的選項,這也是我最近發現的。
    只要在網址後加上[&display=swap],[font-display: swap]就會加入在檔案裡了~~

    不過奇怪的是,Blogger似乎不接受link的方式新增,僅接受@import url的方式。(神秘的限制)

    如果使用link的話就會出現[The reference to entity "display" must end with the ';' delimiter.]的錯誤訊息~~~~~

    所以.....還是用CSS @import url 好了...

    回覆刪除
    回覆
    1. 你如果不常用 Blogger,可能會習慣不嚴謹的 xhtml 結構,例如只使用 <meta> <link>

      嚴謹的 xhtml 使用 <link></link> 就可以了

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP