做出高質感網站，必須知道的網頁字體應用 * 造九頑五

如果要說到一個網站新手；或是較缺乏設計經驗的工程師，最容易忽略的網站要素，那大概就是網頁字體了，設定網頁字型並不難，但有一些規則你必須了解，才能完善的掌握網站的呈現方式。

以下介紹設定網頁字體的三種方式：

使用系統內建字體

如果你覺得什麼都不設定就是使用系統內建字型的話，雖然也沒錯，但可能也會因此讓網站相當的沒有質感。系統內建字體中英文加起來可能有幾十種到百種，其中有比較適合應用在網頁上的，相反也會有不適合的，因此我們必須透過 CSS 的宣告來告知瀏覽器，「在我的網頁上，請使用這個字型！」瀏覽器就會遵照你的網站設定，去呈現該指定的字體給訪客。

指定字體的 CSS 語法：

font-family: '指定的字型‘;

如果訪客沒有指定的字型呢？

對！這就是我們要考量進去的狀況，內建字體的「好處」就是由於是內建的，大家都有，但是別忘了系統還有分為 Windows 和 Mac 的系統，兩邊的內建字體是不同的，因此為了因應這個狀況，我們要指定「多個字體」，當第一個字體沒有的時候⋯⋯系統就會依照順位來找尋第二個字體：

內建字體指定建議

這是我常用的內建字體指定方式：

font-family: "Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;

實際使用時，可依照最適合你網站的狀況做調整，像是如果要用到簡體中文，可能用「微軟雅黑體」會比用正黑體來的好。

通常設定網頁字體時，會將「英文字體」在最前面順位、接著是 MAC 字體、Windows 字體，原因是中文字體通常「包含」英文字體，因此假如你將中文字體放在順位前面，找到中文字體後，瀏覽器就不會再往下找其他指定字體了，這是設定時的一個小訣竅。

免費網路字體

免費的網路字體我都使用 Google Fonts，上面有接近一千種的字體供大家挑選使用，但我們所關注的繁體中文字的部分選擇就不多了，甚至沒有被放在 Google Fonts 中，而是放在 Google Fonts Early Access，目前可以選的也只有「Noto Sans 思源黑體」，但思源黑體就非常好用了！思源黑體字型漂亮、簡潔、易於閱讀，是一款優異的無襯線黑體，很適合在網頁上瀏覽，目前造九頑五全站使用的就是此字體。

Google提供的額外的中文字體

其實Google Fonts Early Access 曾經是有提供「五款」繁中的字體的，不知道為什麼後來只留下了思源黑體(也許是黑體在網頁上的使用率遠大於其他)，但是！只要你有當初Google所提供的字體接口的網址，依舊是可以使用其他四款中文字型的，這五款包含依然提供的思源黑體共是：

Noto Sans TC (Chinese Traditional) 黑體字體–思源黑體
cwTeXKai (Chinese Traditional) 楷體字體
cwTeXYen (Chinese Traditional) 圓體字體
cwTeXFangSong (Chinese Traditional) 仿宋體字體
cwTeXMing (Chinese Traditional) 明體字體

載入字體的網址以及設定的語法各為：

只要將下列 CSS 語法貼在你的網站中，就可以使用font-family 來指名使用該字型。如果不會設定的朋友請看這篇：簡單有用的 WordPress 網頁字體修改方法

Noto Sans 思源黑體

@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
body{
  font-family: 'Noto Sans TC',sans-serif !important;
}

cwTeXKai 楷體字體

@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
body{
  font-family: ‘cwTeXKai’, serif;
}

cwTeXYen 圓體字體

@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
body{
  font-family: ‘cwTeXYen’, sans-serif;
}

cwTeXFangSong 仿宋體字體

@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
body{
  font-family: ‘cwTeXFangSong’, serif;
}

cwTeXMing 明體字體

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
body{
  font-family: ‘Noto Sans TC’, sans-serif;
}

融入前面所學字體優先級的概念：指定多個字體

以上程式碼皆只單獨指定該字體，可照文章一開始的概念，自行在前後加入優先讀取字體順序如：

@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
body{
  font-family: 'Helvetica', 'Arial', 'Noto Sans TC', '黑體-繁','微軟正黑體', sans-serif !important;
}

（以加入思源黑體並將英文保留用原本系統內建的好看字體，並在出錯讀不到思源黑體時讀取內建好看黑體為例）

2021 更新 Noto Sans 思源黑體、思源宋體的正式網址

earlyaccess 的字體檔案大小都特別大，雖然還是可以用，但多少會影響一點網站速度，幸好 Google 後來提供了正式版的「思源黑體」和「思源宋體」中文字型的網址，檔案大小都比本來小了 50% 左右！是不是很棒！

如果已經有加入思源黑體的朋友，也趕快置換一下引入網址吧，只要將本來的程式碼換成下面：

Noto Sans 思源黑體 (正式版)

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap")
body{
  font-family: 'Noto Sans TC',sans-serif !important;
}

Noto Sans 思源宋體 (正式版)

@import url(https://fonts.googleapis.com/css?family=Noto+Serif+TC&amp;display=swap")
body{
  font-family: 'Noto Serif TC', serif;
}

其他字體沒有正式版嗎？

很遺憾的是，正式版只剩下黑體和宋體，如果要用其他的還是得用 earlyaccess 的版本，剩下的這兩個是最好用的，黑體自然不用說，宋體則是有「襯線」的好用選擇，假設你的網站想營造一點文青的風味，都使用黑體有點無趣，試著把一些大標題改為「宋體」也是個不錯的配置方式喔！

正式版多了 swap 的功能

有發現引入網址的最後面加上了 display=swap 嗎？這是讓字型遇到網路比較慢的狀況未能即時下載時，可以先顯示內建的字體，不至於讓網站有空白的空窗期。

使用中文字體需注意檔案大小

英文字體因為字數少，大小寫加起來才 52 個字，因此檔案小。但中文字體就不同，有上萬個中文字，依造字重——細體、正常、粗體——不同，更需要倍數的字數，因此一套中文字體檔案都不小，當你 import 引入在自己網站中使用，其實就是讓訪客到訪你的網站時，下載此套字體，確保訪客可以使用你指名的字體，但一套中文字體就要好幾 MB，假如用個兩套可能第一次進你網站的訪客就要先下載超過 10MB 的檔案大小，不利網頁速度、也增加伺服器負擔及流量。

正式版的部份因為大幅減少字體大小，假如要用到黑體+宋體，也是勉強可行的。

關於字體的速度影響可以參考此篇，最後面有測試將 Google 字體拿掉後的測試成績：WordPress優化神器！必裝的最強快取組合！

網路字型Web Font

最後要介紹的是像 justfont 這樣的雲端字體 ( Web Font )

網路字型(Web Font)主要用途在使用於網頁上的字型顯示，擺脫以往字型需安裝方能顯示的限制，使得於網頁設計上能夠不用轉圖檔，使用者一樣能夠看到特殊的字型效果。目前在英文語系國家，網路字型的使用甚為方便，但在亞洲語系國家則限制頗多，主要的困難點在於亞洲語系國家的字數太多，導致單一字型檔的大小，動輒5~6M，甚至有達到10M以上的字型檔案，要在瀏覽時下載整個字型檔是不現實的。網路字型機制，是依據您網頁上使用的文字，動態的產生並下載您需要的字型，所需下載的檔案大小等同於圖檔，且使用方便無須額外設定。 — form <just font> 關於網路字型的說明

可以看出網路字型的好處就是，可以不需要下載全部的中文檔案，而只需透過「網路字型」的機制，下載網頁上所使用到的字即可，大幅的降低了所需下載檔案的大小。

創造更多字體混搭的可玩性

其實在本網站一開始是嘗試使用宋體標題，搭配黑體內文的，但在測試後發現，檔案已經超過 10MB，因此不得不折衷，全站統一使用黑體顯示，但如果使用如「just font」此類網路字體服務的話，因為檔案大小不大，就可以盡情的嘗試各種組合搭配，增加網頁的可看性！

網路字體使用方案

網路字體 Web Font 的計費方式是採用訂閱制的，PVs 是 PageView 的意思，代表多這個方案可以使用多少個網頁瀏覽次數，例如：假如你的網站平均一個訪客會瀏覽三個頁面的話，那 100,000 PVs 就可以提供給⋯⋯100,000/3 = 33,333 個訪客使用。

因此可以先估算自己網站一年的使用人數，假如遠超過此數目的話，也有提供更高的PVs數的方案可以購買，而如果因為網站成長造成不到一年 PVs 就用光的話，也沒關係，服務商會發信給您，告知您需加購 PVs，還有一點需要注意，假如是 HTTPS 的網站，那就一定要購買到最右邊的企業方案才可以使用。

因為網路字體需持續接受廠商的服務，串接廠商的字體檔案、依照頁面上的文字產生檔案的部分也是廠商提供的技術，因此訂閱制的服務很合理，並且訂閱期間可以使用的字體非常多元，其中有我認為最棒的中文「黑體」，信黑體可以使用！另外還有一款我很喜歡的中文字體「金萱體」，也可以使用！這些字體要買斷的話一套就得要好幾萬塊呢！

結論：三種字體方式優缺點比較

系統內建字體

優點：無需下載任何字型檔案，檔案最小，頁面載入速度最快。

缺點：選擇性較少，無法統一使用者體驗( MAC 和 Windows、Android 的使用者所看到的都不同)，內建字體品質比不上自選字體，這點尤其在 Windsows 的使用者上更是明顯( windows 內建的好看字體較少)

Google fonts

優點：免費、Google 主機下載字體不需吃自己主機流量、Google 主機速度快。

缺點：易造成頁面檔案肥大、只能選一款中文字體就是極限了，無法混搭。

網路字型 Web Font

優點：依照有使用到的中字生成檔案，檔案小、可搭配數款字體、付費字型品質高。

缺點：使用成本三者最高。

	檔案 (影響頁面載入速度)	可選擇字體 (影響頁面豐富與質感)	成本 (~~影響你的錢包厚度~~)
內建字體	無需下載額外檔案	只可選擇各系統內建	無
Google Fonts	大	中文字體少、但品質優良	免費
Web Font	小	多、品質高	依網站使用量選擇方案

沒有哪種方式一定最好，要看你的網站追求的是什麼，如果「速度」是你的網站最重要的使用者體驗，那麼完全不需要任何額外下載的內建字體可能是你最佳選擇，但要記得為每個系統指定好適當的字體，如果希望能搭配多款中文以及追求高質感的中文字型，那麼網路字型 Web Font 可能是你的最佳選擇，而 Google Fonts 雖然檔案最大，但憑藉著 Google 的伺服器速度，其實下載也不會太差，但可搭配的中文字型不多，是另外兩個方案中折衷的一個方式。