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;

看看效果如何:

思源黑體的範例

延伸閱讀

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。

4 thoughts on “Webfont 的思源黑體終於來了!

  1. 回覆

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

  2. 回覆

    […] 燒喔!Webfont 版的思源黑體早鳥試用 […]

  3. 回覆
    Chino Lin - 2016-04-17

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

    1. 回覆
      ossian - 2017-02-02

      抱歉,沒注意到你的訊息。

      目前這套字型僅放在Google早鳥測試的頁面上,並非正式的釋放版,所以沒有支援 WEBFONT 的各種格式。如果你想在自己的專案上使用思源黑體的話,比較建議用商業解決方案,例如:justfont 或 typekit…

你的觀點

Scroll to top