
重點整理
挑字型可以到 Google Fonts 搜尋中文字型(例如思源黑體 Noto Sans TC、思源宋體),再用 CSS 套用到網站;想知道別人網站用什麼字,可用 Chrome 擴充功能快速查看。原文提到的 Early Access 頁面已關閉。
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定,一個好的網站,所必須具備的要素有很多,而網站字體這個部分常常會被忽略,如果說圖片能幫助使用者快速了解網站內容,那麼文字就是網站內涵深度的體現,如果說沒有選擇適合的字體來呈現文案內容,造成使用者在閱讀上的困難,那麼再動人的詞彙,再吸引人的文字涵義,都無法真正打動使用者的心。
以下是在 WordPress 後台中編輯文字的圖片,字型的部分可以在紅色方框標示處做選擇,如果說沒有另外安裝字型,可以選擇的字型就只有網站預設的選項。

下圖是筆者將常用的字體用同樣的文字內容在網頁上呈現,每一種字型所呈現的樣式都有適合與不適合的部分, Arial black 就相當適合強調英文字體時使用,在同時具有英文與中文的段落中會自動將英文以粗體呈現,而 Impact 適合網站風格屬於活潑前衛的感覺。 Microsoft JhengHei(微軟正黑體)則適合於比較正式常規的內容。因此選擇對的字體可以為網站增加更具有特色的主要樣式,為網站加分。

基於字體選擇對網站的重要性,鵠學苑在這篇教學文章中將各位同學說明最新 Google 字體 的查找以及下載位置,包含了2017年釋出的開源字體:思源宋體( Noto Serif CJK ),具有簡約大氣,適合文學作品及長篇文章的特點,另外還有釋出 5種免費中文字體,雖然還在測試階段,但一樣可以下載並透過 CSS 樣式表在網站上呈現,分別是:
- 圓體字 – cwTeXYen
- 仿宋體字 – cwTeXFangSong
- 楷體字 – cwTeXKai
- 明體字 – cwTeXMing
- 黑體字(思源黑體)– Noto Sans TC
(小提醒:鵠學苑的所有教學均是以 Apple Mac OS X 系統 做步驟示範!)
Google字體介紹及下載方式
第一步:進入到 Google Noto Fonts 網站,在下圖中可以看到紅色方框標示的搜尋欄位。

第二步:輸入 Noto Serif CJK 搜尋思源宋體。

第三步:可以看到 Noto Serif CJK 思源宋體有不同的呈現樣式,區分為 BLACK 、LIGHT 等字體,在安裝時可以自行選擇該樣式的字體檔案在網站中使用。

第四步:另外的五種字體可以在 Google Fonts Early Access 這個網站中找到,在右上角輸入Chinese Traditional 以快速搜尋。

第五步:在這裡以 Noto Sanc TC 黑體字(思源黑體)作為範例,在圖片中央以紅色方框標示的區塊中, Link 的 CSS 程式碼是用來定義在網站中匯入 Noto Sanc TC 這個字體,Example則是 指定網站內元素呈現 Noto Sanc TC 這個字體。
Link:@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
Example:font-family: 'Noto Serif Khmer', serif;

快速查看WordPress網站字體樣式
第一步:進入到 Chrome 線上應用程式商店,在右上角的搜尋框中輸入 WhatFont ,可以找到如下圖二的畫面。


第二步:點擊圖片會有應用程式的簡單介紹,接者點按右上角的 ADD TO CHROME 安裝應用程式到瀏覽器。

第三步:在網址列旁應用程式區塊會有黑色 f 字樣的按鈕。

第四步:點擊後會開啟應用程式功能,當移動滑鼠時就會顯示這個網頁中文字的字體、大小、顏色、行高、字寬等詳細資訊。

可以參考實際操作影片:
第五步:另外如果說希望為英文的文字呈現不同的字體,也可以到 Google Fonts 這個網站來查看字體樣式,Google Fonts有超過800種字體可供選擇,相信一定可以找到你想要的字體。

原文提到的 cwTeX 字型和 Early Access 頁面還在嗎?
原文介紹的 Google Fonts Early Access 頁面已經關閉,網址會導回 Google Fonts 首頁,Google Noto 舊網址也已轉到 Google Fonts。因此:
- 思源黑體、思源宋體請直接在 Google Fonts 搜尋 Noto Sans TC、Noto Serif TC 使用。
- 原文的
fonts.googleapis.com/earlyaccess/…引入寫法已不建議使用,請改用 Google Fonts 目前提供的引入程式碼。 - cwTeX 系列字型不再由 Google Fonts 提供,若仍想使用需另找來源,並確認授權與檔案大小是否適合網頁使用。
常見問題
Google Fonts 有哪些免費中文字型?
Google Fonts 上常用的繁體中文字型有思源黑體(Noto Sans TC)與思源宋體(Noto Serif TC),另有幾款風格字型可以搜尋語言「Chinese (Traditional)」篩選。這些字型都可以免費用在網站與商業用途,授權以字型頁面標示為準。
Google Fonts 中文字型要怎麼套用到網站?
在 Google Fonts 選好字型與字重後,複製提供的 link 標籤放進網站的 head,或用 CSS 的 @import 引入,再用 font-family 指定要套用的元素。WordPress 使用者也可以用佈景主題的字型設定或 Elementor 的全域字型直接選擇。
要怎麼知道別人的網站用什麼字型?
可以安裝 WhatFont 這類 Chrome 擴充功能,啟用後把滑鼠移到文字上就會顯示字型名稱、大小與顏色。也可以在文字上按右鍵選「檢查」,在開發人員工具的 Computed 頁籤查看 font-family 與實際使用的字型。
結語
最後要跟各位做一個提醒, Google Fonts Early Access 中提供的字體都是測試版本,也就是説當測試完畢後可能會將其字體加入到正式的Google Fonts網站,也有可能直接被移除,其移除並沒有一定的標準,也許是太少人使用,或者對於增加文字可閱讀性或獨特性沒有太大幫助,因此如果說各位同學在下載字體時發現該字體搜尋不到,那麼就表示已經被移除了。
