主題 I：甚麼是「網頁字體」？

內容概要：設備字體與網頁字體；網頁字體的優點；網頁字體也有美中不足？

1 什麼是網頁字體

顧名思義，它是在網頁上顯示的字體。字體的重要性不必多言，平面設計往往就是圖片和字體，因此字體對於企業形象和品牌識別非常關鍵，是一項重要資源。例如馬自達汽車便是邀請蒙納字體總監小林章先生客製化了一款品牌字體，應用到數位網頁、車機嵌入、印刷物料等多個管道。

1.1 設備字體與網頁字體

而關於設備字體和網頁字體的差別，關鍵就是字體在哪裡的問題。字體其實是一款電腦軟體，如果安裝在你的電腦、平板、手機等作業系統內，就是設備字體；而由於大家設備預先安裝的字體往往不同，因此如果要在網頁上統一顯示某個字體，需要開發者在伺服器上進行配置，而非依賴使用者設備自有的字體，因此有了網頁字體這個概念。

W3C 的 CSS 的字體模組第三等級在 2018 年已經成為推薦標準，非常紮實穩定。在這樣一個規範裡，可以用 @font-face 語句來呼叫網頁字體。

1.2 WOFF 格式

字體到底是怎樣一個格式呢？大家比較熟知的，也是我們裝置上常見安裝的 OpenType 格式；而網頁字型有著專屬的格式 WOFF2。二者的差別如下：

• 可靠的壓縮：WOFF2 相當於把 OpenType 格式內含的資訊進行了壓縮，並在頭尾補充了一些資訊。
• 健全的授權：WOFF2 補充的其實就是授權訊息，發佈到網頁的時候不能被下載至桌面使用，相對於 OpenType 更便於字體廠商規避字體檔案被免費傳播的情況。
  普遍的相容：WOFF2 的支援率很高，可以相容於幾乎所有瀏覽器，非常成熟，可以放心使用。

2 網頁字體的優勢

2.1 外觀：統一、可預見

網頁字體能夠讓品牌在各個裝置都能表達出一致、可預見的外觀。由於設備和平台的差異，自適應的排版和佈局可能會造成實際效果的差異，統一使用品牌專屬的網頁字體，便能夠優化這一問題，使得設計可控。

2.2 告別圖片：搜尋引擎優化、高畫質易認

網頁字體不必嵌入圖片中，字體成為了「活」的，由此可以複製貼上、可以被語音朗讀、有利於搜尋引擎優化（SEO），也有利於靈活的響應式佈局。例如 Monotype 蒙納官網首頁的 banner 便是利用了圖文分開。

2.3 可近性
 

• 可感知：有替代文字能夠進行語音朗讀，幫助到視障人群；對比、字號等。
• 可操作：能多種方式導航、聚焦等。
• 可理解：易認易讀、可預測、錯誤預防等。
• 穩健：易於相容、維護。

3 網頁字體的挑戰

3.1 訪問很慢？

我們固有的印像是，由於 CJK 字體涵蓋字元集很大，字體包檔案大，因此應用於網頁字體時讀取、載入和顯示的速度會受到影響。目前已經有了幾種成熟的解決方案：

• 外部託管：利用字型廠商的伺服器進行託管，直接嵌入 CSS 程式碼。
• 自主託管：產生 WOFF 文件，放在自己的伺服器上。

蒙納旗下的企業級字體管理平台 Monotype Fonts 也為以上兩種方式提供了優化載入速度的方法：

• 直接產生 CSS 程式碼：利用外部託管技術，選擇好字體後，可以在 Monotype Fonts 中直接產生嵌入程式碼。
   
• 啟發式子集、字型包切分等技術：對於 CJK 這類較大的字元集，可以在 Monotype Fonts 產生較小的子集。
  
  
  • 利用「啟發式子集」（heuristic subsetting）。雖然這個術語讓人感覺陌生，但我們仍然可以用非技術的語言來解釋：你可以透過Monotype Fonts 挑選字體包中你需要用到的字符（而非完整字體包），以此來大幅縮小瀏覽網頁時加載的字體包。
     
  • 字體包切分技術（font-slicing）。原始的字體包被切分成若干份「小包」（可以多達上百份）。網頁訪客開啟網頁時，頁面程式碼透過指令查詢所需字體「小包」，減少載入時間。
     

3.2 授權複雜？

網頁字體的授權可能會更為複雜，例如要根據 page views、按年付費等等，具體要諮詢到字體廠商。 Monotype 蒙納目前推出的 Monotype Fonts 就是一個全套解決方案，對於使用者來說取得授權會更為方便。
 

主題 II：Web Typography 網頁字體排印基礎

內容摘要： 字（Unicode）體（OpenType）排（CSS）印（螢幕顯示）；常用 OpenType 特性；可變字型與擦邊球「圖示字型」。

1 字：Unicode

• 正確的編碼：Unicode/GB18030
• 多文種並存
• 看得見與看不見的字符

電腦上的字都需要有編碼，我們會遵循一定的編碼標準。而現在的電腦字體涵蓋了更多的語言，例如印度天城文等，因此更容易實現混排。其次是網頁字體的程式碼中包含了更多元素，來實現更佳的排版效果（例如蘋果網站以此實現了特定的兩個單字間不間斷的空格）。

2 體：WOFF2、OpenType

2.1 什麼是 OpenType 特性
 

• OpenType Layout feature: 版式特性
• 字形替換(GUSB)與字形定位(GPOS)
• 標籤標記：四個小寫字母

微軟的 Typography 網頁中列出了詳細的 OpenType 特性規範，其中包括文字標籤、語種標籤、特性標籤和基線標籤。因此具體來說，OpenType 特性應該是版式特性（Layout Feature），為實現更好的排版效果而生。

具體而言，這項特性是在對字形進行替換，或是進行定位和挪動，來實現字體排印特殊的需求。每個特性都是一個標籤，用四個小寫字母標記，例如小型大寫字母（smcp）。

由於 OpenType 特性豐富多樣，所以大家在應用時可以先查看字體廠商所提供的說明，以及自己查找特定特定的應用方式。

2.2 相容性與成熟度

目前在 CSS 語句中呼叫特性的支持性已經非常好，目前幾乎所有瀏覽器都能支持，涵蓋桌面端和行動端。 2022 年，美國 Web Almanac 統計表示，44% 的網頁字體都會有 OpenType 特性，其中應用最多的是 Kerning。

上期講到蒙納旗下 Monotype Fonts 生成子集從而壓縮字體包大小的功能，如果你進入到後台，也可以找到是否包含 OpenType 特性的選項，強烈推薦勾選這個選項。

2.3 使用 OpenType 特性
 

• 特性太多、四字標籤太難記，應用時需多查多看
• 預設行為與參數不統一
• 確認瀏覽器支援與否、多做測試

3 排：CSS

3.1 內容與樣式的分離

製作網頁的基本原則是，內容與樣式的分離。文章實際內容放在 HTML（超文本標記語言），而呈現樣式則是利用 CSS（層疊樣式表），互相搭配才能達到網頁的最終效果。

3.2 與文字相關的 CSS

最重要的是 CSS Font 和 CSS Text，當然也有很多其他與文字相關的 CSS 的規範和屬性。我們在網頁字體排版時，常常會需要調整字體、字號、字重等基礎要素，也需要實現兩端對齊、標點懸掛、首字下沉、標點擠壓等各種版式，都能夠用CSS 來實現，多了解具體程式碼的效用，來配合我們的需求。

3.3 易讀性的組成要素

所謂的易讀性，可以比喻為一個三角凳，需要同時平衡行長、行距、字號三個要素，三者互相關聯缺一不可，無法單獨地進行考慮。

4 印：設備與平台

現在企業和品牌的內容往往要分發到多個裝置和平台，現在也很流行響應式設計，但這也對字體排版和渲染提出了新的挑戰。例如蒙納官網桌面端和手機端的設計就針對圖片和文字的排版位置進行了控制，這些細節會直接影響到視覺效果。

5 網頁字體排印的各種擦邊球

5.1 表情符號

Emoji 遍布各個平台和設備，現在已經是 Unicode 標準了，所以長得像圖，但實際上有文字編碼。

5.2 圖示字體

• 方便與文字對齊位置
• 全面使用字體機制（字重、顏色）
• 節約空間、方便管理
• 網頁圖示字體服務

主題 III：中文網頁字體實作與挑戰

內容摘要：CJK 網頁字體的現況；中文網頁排版技術細節；中英混排要點；總結與展望。

中文有四大印刷字體：宋體、黑體、仿宋和楷體。而我們現在的網頁排版很少能看到仿宋和楷體，這是因為我們以往的網路基礎設施是從國外引進的，襯線體和無襯線體可以很好地對應到宋體和黑體。

我們在CSS呼叫字體的時候經常使用 generic-family，目前字體規格正在開發的是第四級，雖然還不太穩定，但正在加入更多的功能來滿足需求，後續還需進行測試。

從有需求，到經過檢驗，到最終應用，是一個漫長的過程。因此我們可以來看看現在能做什麼，在此基礎上展望未來。

1 中英混排要點

1.1 最好能訂製：安心、放心

由蒙納字體創意總監小林章先生創作的翔鶴黑體，就是在 Neue Frutiger 的風格和字形基礎上演繹而出，因此這樣的定制是最適合中英文混排的，可以放心使用。

1.2 落實回落機制

如果沒有專門訂製的中英文搭配字體，就會面對兩個難題。一是需要搭配中英文，合適度需要考慮；二是網頁字體會根據使用者的環境和設備而變化，而身為開發者很難預測使用者看到的視覺效果。以下介紹一些控制回落的方法：

• 英文優先：在寫 font-family 的時候，盡量把英文寫在前面，因為往往一些老的中文字體包裡所搭配的英文效果並不理想。
• 系統字體比特定字體優先
• Mac 比 Win 優先：也要考慮到不同的平台。針對於桌面端而言，Mac系統的使用者可能會更希望看到特定的字體，因此大家可以考慮優先寫入 Mac 系統字體。
• 注意向後相容：一定要有通用字體家族兜底，避免字體最終無法顯示

1.3 特別注意中英共用標點

標點對中文的易讀性有非常關鍵的影響，而因為前面提到了英文優先，所以有些中英文共用的標點可能會影響到中文版面的展示。因此，需要進行微調或定制，例如蘋果官網的所有中文標點都是半寬。對於一些中英文共用碼位，要注意好搭配。

1.4 實作配置的要點：從單位到字距到網格
 

• 網格概念
  
  英文沒有「格」的概念，因為字母是比例寬度；而中文是有「格」的，因此理論上來說行長寬度是必須字號的整數倍。中式網格所有元素以正文字號碼為基礎，例如行長、縮排、行高、標題等元素。
  
  而字號基礎單位有絕對單位和相對單位，例如絕對的 pt、mm，和相對的 px。較適合中文漢字的相對單位是 em 和 rem。如果我們以 em 為基礎單位，那麼段首空兩格就可以寫 2em。
   
• 響應式設計
  
  對於現在跨裝置的網頁展示，需要考慮到響應式設計。蘋果的網頁文字並非隨著視窗寬窄可以無極變化，而是間斷性變化，以此來控制行長，定好在特定尺寸下重點寬度的排版，就能夠實現比較理想的效果。因此我推薦大家在進行響應式設計時，抓住階段性的寬度，來提升視覺可控性
   
• 行距問題
  
  另一個要強調的是中英文行距問題。英文可以行距是0，密排也可以閱讀；但如果直接轉換成中文，易讀性就會降低很多，要注意中文的行距應當大於英文，更換語言後要主動調節合適的行距，正文至少要1.5 倍行距。

2 所謂的中文「高級排版特性」

此外，還有一些所謂的高階排版特性。

• 換行控制：最好是實現依照語意換行
   
• 中英間距：一段中文中如果有英文單詞，空格如何設定是一個長久以來討論的話題。其中一個關鍵是，這個空格應為樣式，而非使用者強行敲出的空格內容。目前已經有一些瀏覽器能夠自動添加空格，並且略過已經手工加上的空格。
   
• 標點寬度調整：有行頭行尾的標準，也有行內「連續標點」的調整。