changed 4 years ago  
Linked with GitHub

To設計師：入門網頁字型指南-3

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
系列目錄

字體設定的複雜度光譜

接續上一篇CSS設定字體的邏輯，我們可以歸納出字體設定的思路，基本就是越特定的越前面、越通用的越後面，並且大致能整理成下面這些選項：

  1. 設計使用的指定英文字體，可能需要額外掛載
    例如：Montserrat、Futura…
  2. 指定的系統英文字體，可針對不同系統自行指定
    例如：Segoe UI、Roboto、Ubuntu…
  3. 設計使用的指定中文字體，可能需要額外掛載
    例如：思源黑體、台北黑體…
  4. 指定的系統中文字，可針對不同系統自行指定
    例如：微軟正黑體、蘋方體…
  5. 瀏覽器系統字，特定瀏覽器能讀取、會根據版本渲染不同字體
    例如：system-ui, -apple-system, BlinkMacSystemFont
  6. 通用字，作為最終備案，可選擇：
    • serif（襯線字）
    • sans-serif（無襯線字）
    • cursive（手寫字）
    • monospace（等寬字）
    • fantasy（藝術字、注意大多數中文不支援這個設定，會轉為serif或sans-serif來呈現）
  7. Emoji（顏文字、符號），需要控制Emoji呈現的專案可以使用[註1]
    例如：apple color emoji、segoe ui emoji、segoe ui symbol、noto color emoji

依據專案需求不同，實際採用的項目和順序也會不同。近年來許多大型網站為了追求載入速度、提高網頁和操作系統體驗的一致性，會單純只指定系統字（system-ui）和通用字，更有不少寫法會將 -apple-system 和 BlinkMacSystemFont 放在最前面，這兩者分別對應Mac的safari和chrome瀏覽器。system-ui的支援度近期已經提升得相當高了，可說使用系統字也逐漸成為一股趨勢。

caniuse：system-ui的瀏覽器支援度
system-ui的瀏覽器支援度，截圖自caniuse.com

觀察各家網站字體實際如何設定

瞭解上面的規則之後，會發現其實並沒有一個普世性的最佳字體選擇。字體如何設定應該依據專案的需求來判斷，從超多超複雜、到超少超簡單，都是可行的。實務上，各家網站又是如何設定字體呈現的呢？

Apple官網的設定：

​​​​font-family: "SF Pro TC","SF Pro Text","SF Pro Icons","PingFang TC","Helvetica Neue","Helvetica","Arial",sans-serif

Microsoft官網的設定：

​​​​font-family: 'Segoe UI',SegoeUI,'Microsoft JhengHei',微軟正黑體,"Helvetica Neue",Helvetica,Arial,sans-serif;

再觀察justfont官網的字型設定，會發現是這樣的：

​​​​font-family: "genyogothictw",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

這三個例子分別呈現兩種方向：

  1. Apple和Microsoft：極端派，基本只設定自家系統使用的字體，在網頁上有掛載英文字體檔案，中文會顯示系統預設字型（我選的字體最讚、要是沒載到字體造成看到呈現效果不好，那都是你們的問題XD）
  2. justfont：讓大部分使用者都能看到源樣黑體，載不到源樣黑體的時候，不同系統的使用者會看到和自己系統一致的字體，

設計師可以評估下面這些面向，來決定要使用特定的字體還是採用系統字就好：

  • 業主需求指明特定字體
  • 專案的規模及目的：炫技的形象網站還是大型資訊論壇？
  • 專案的使用者受眾：是否有可能會被牆？電信發展程度如何、網速是否受限？通常使用什麼裝置瀏覽頁面？
  • 專案的風格：可愛童趣、沉著優雅，或是單純實用即可？

這些面相沒有重要性的排序（好吧，除了需求單權重高些），不同專案可能側重不同的項目。舉例來說，可能要推廣的使用者硬體實在太受限，所以只好放棄選用符合專案風格的字體，這時若可以在前期考量到，並採取適當的對策──例如放更多重心在畫面元件風格的塑造──就能避免到了專案後期，才因為使用者載入速度太慢而全盤調整。

最後想稍微提一下，雖然業主的需求凌駕一切……不過，表面上的要求「想要娃娃體、想要字很大、想要紅色的字比較顯眼」並不能算是真正的需求，如何進一步與業主討論，得出實際的需求「想要可愛的風格、想要容易閱讀、想要某個區塊特別突出吸引人」，這就要看設計師的溝通能力了！希望這篇文章能補充大家的彈藥庫，相信以後各位能拿出除了沒有人在網頁上用娃娃體辣風格不適合以外的實際理由來說服業主！

系列的下一篇文章，會來介紹前面有提到、不可錯過的好用工具：Google Fonts。

[註1]　延伸閱讀： 關於Emoji，可以看看：CSS Color Emoji Stack；想更深入瞭解的話可以看关于CSS emoji字体和OpenType-SVG我所知道的一些事

Select a repo