Webfont 的思源黑體終於來了!

Webfont 的思源黑體終於來了!

先前我們介紹 Google Fonts 早鳥方案時,有提到 Google 目前有提供五套中文的 Webfont,當時還有點遺憾裡頭沒有大家注意許久的思源黑體。其實仔細想想,就會發覺標準版的思源黑體不太適合用在目前的網路環境中。因為光一組標準的思源黑體就有 15-16mb 大,如果還要考量提供不同粗細的字體時,字型下載可能就要佔去 40-50mb,以目前的網路條件來說的確有點過大。加上網站行動版本佔整體流量的比重越來越多,40-50mb 的下載量對行動網頁會是很大的負擔!畢竟不是每一位使用者的手機都採用不限流量的網路方案,字型大小與網路流量兩者間勢必要做一些取捨。

所以當聽到 Google 把思源黑體做成 Webfont 後,第一個反應就是去抓 CSS 檔的字型路徑,把該字型下載回來,比較看看 Webfont 版的檔案大小與標準版的思源黑體是否相似。

慶幸的是,Google 顯然有注意到這點,Webfont 版的思源黑體只有約 2.5mb,再搭配一兩組粗體字,總共也不到 10mb,比一組標準版的思源黑體都小。其實在 Google Fonts 早鳥頁裡也有提到,Webfont 版只提供台灣和香港常用國字標準字體表,以我自己實驗的結果來說,在順暢的 4G 網路下大約需要等 5 到 10 秒 (要看網路情況) 頁面才會全部轉成思源黑體,如果網路有塞車的情況,等待的時間有時候會到 30-60 秒不等。至於這樣的速度如何?能不能使用在正式的專案上?就有勞各位看官自行判斷。

立即動手做

首先,一樣先到 Google Fonts: Early Access 的頁面,由於是早鳥方案,所以 Google 並沒有針對內容優化,只把所有的字型列表出來,找起來有點不方便,因此你需要透過搜尋的方式尋找「Noto Sans TC (Chinese Traditional)」。找到後,你會發現 Google 其實已經把相關的 CSS 設定好,你只要直接引用就可以。

引入

@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);

設定

font-family: ‘Noto Sans TC’, sans-serif;

很簡單吧。裡面除了標準的 Normal 之外,另外還提供了 100、300、400、500、700、900 五種不同的粗細,你可以透過 font-weight 的方式來調整。

font-weight: 500;

看看效果如何:

思源黑體的範例

延伸閱讀

3 Comments

  1. 如何使用 Google 的 WebFonts? - 踢踢五 - 踢踢五 · 2016-03-13 Reply

    […] 2016/03/13 更新:Google 已經開始提供思源黑體的早鳥試用。 […]

  2. Chino Lin · 2016-04-17 Reply

    剛測試一下思源体在win7大多瀏覽器都無法顯示
    只有Safari可以其它都是顯示細明體
    但是英文字體看起來是有轉到
    看一下問題都是出現字型 failed to decode downloaded font

發表意見