做出高質感網站,必須知道的網頁字體應用

網頁字體設定

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

 

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

使用系統內建字體

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

指定字體的 CSS 語法:

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

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

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

網頁font-family設定

內建字體指定建議

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

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所提供的字體接口的網址,依舊是可以使用其他四款中文字型的,這五款包含依然提供的思源黑體共是:

  1. Noto Sans TC (Chinese Traditional) 黑體字體–思源黑體
  2. cwTeXKai (Chinese Traditional) 楷體字體
  3. cwTeXYen (Chinese Traditional) 圓體字體
  4. cwTeXFangSong (Chinese Traditional) 仿宋體字體
  5. 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&display=swap")
body{
  font-family: 'Noto Serif TC', serif;
}

其他字體沒有正式版嗎?

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

正式版多了 swap 的功能

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

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

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

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

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

網路字型Web Font

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

webfont網路字體

網路字型(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 的伺服器速度,其實下載也不會太差,但可搭配的中文字型不多,是另外兩個方案中折衷的一個方式。

 

在這裡,你不會被廣告打擾,所有的學習內容都是免費的。
如果這讓你感到滿意,一杯咖啡能讓我們走得更遠。

請 Perry 喝杯咖啡
上一篇SEO 優化趨勢觀察 作弊退散 內容為王 下一篇有 Facebook 粉絲專頁,還需要經營網站嗎?

Divi 編輯器特賣 onSale!

Divi Summer Sale 20% 折扣!時間有限!

90秒強大功能展示:傳送門

優惠傳送門:傳送門

Divi 中文化:傳送門

完整教學:傳送門

Divi 特賣 onSale!