---
title: To設計師：入門網頁字型指南-3
tags: 網頁設計, 字體
description:
---
# To設計師：入門網頁字型指南-3


{%hackmd 90wqUJSZS6-SJOFf7BzsQA %}

---

### 字體設定的複雜度光譜

接續上一篇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的支援度近期已經提升得相當高了，可說使用系統字也逐漸成為一股趨勢。

system-ui的瀏覽器支援度，截圖自[caniuse.com](https://caniuse.com/#search=system-ui)

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

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

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](https://www.client9.com/css-color-emoji-stack/)；想更深入瞭解的話可以看[关于CSS emoji字体和OpenType-SVG我所知道的一些事](https://www.zhangxinxu.com/wordpress/2020/03/css-emoji-opentype-svg-fonts/)