2023-12-5 高勁
前言
不同操作系統、不同瀏覽器下的默認字體是不同的，在網頁項目中可以通過 CSS 的 font-family 和 @font-face 來讓頁面渲染出適合當前網頁的字體。
除了特定設置，正確的字體引用會避免兩種字形同時出現：
中西文的字重不統一：
1. 字體的 fallback 機制
在 CSS 中，可以通過 font-family 引用多種系列、多種字體，并且可以對字體先后順序進行設置。
當用戶打開一個網頁的時候，瀏覽就會讀取 font-family 第一個引用的字體，并去檢索用戶當前操作系統下的字體，如有就顯示，如沒有就檢索下一個，以此類推。
若瀏覽器找不到指定的字體，或者沒有設置 font-family 則會 fallback 到瀏覽器的默認字體。
2. 字體的先后順序設置
由于中文字體內都包含西文字體，如想優先顯示效果較好的西文字體，需要將西文字體寫在中文字體的前面。
雖然用戶群體中使用 Windows 系統較多，但 Mac 用戶大部分會下載 Office，所以會存在許多 Windows 下常見的字體，比如微軟雅黑。將 macOS 系統的字體寫在 Windows 的前面，可以保證在對應平臺顯示更好的效果。
先了解 serif（襯線體）與 sans-serif（無襯線體）
襯線體與無襯線體是兩種最基礎的字形分類，襯線體在筆畫開始與末端的地方有像小三角的裝飾。
襯線體更多使用在印刷品上，在紙張上有棱角的字體更容易被識別。而在屏幕顯示中字體過多的裝飾點綴容易造成視覺疲勞，所以在屏幕顯示中更多使用無襯線體。
一些常見常用的字體：
system-ui
一種通用字體系列，它會選擇當前操作系統的默認字體渲染。如在 macOS 與 iOS 系統里 system-ui 指向的中文字體為蘋方，西文字體為 .SF NS。
-apple-system
system-ui 的兼容寫法，在 macOS 與 iOS 系統里調用蘋果系統的默認字體。
BlinkMacSystemFont
為 macOS Chrome 里調用蘋果系統的默認字體。
Arial
無襯線西文字體，經常與 Helvetica 一起出現，支持不同操作系統、不同瀏覽器，兼容性好，屬于安全字體。
Tahoma
無襯線西文字體，經常出現，支持不同操作系統、不同瀏覽器，兼容性好，屬于安全字體。
Helvetica / Helvetica Neue
蘋果生態中最常用的無襯線西文字體，Helvetica Neue 是 Helvetica 的升級版，加了不同粗細、不同寬度的字形。
Segoe UI
無襯線西文字體，Windows 系統的默認西文字體。
Roboto
無襯線西文字體，Android 系統的默認西文字體。
蘋方
無襯線中文字體，蘋果系統的默認中文字體，除了中文簡體（PingFang SC），還有臺灣繁體（PingFang TC）和香港繁體（PingFang HK）。
Hiragino Sans GB (冬青黑體）
無襯線中文字體，用于兼容不支持蘋方的舊版蘋果系統，作為蘋方字體的 fallback。
Microsoft YaHei (微軟雅黑)
無襯線中文字體，Windows 系統的默認中文字體，iOS 與 Android 系統不支持微軟雅黑。
Noto Sans (思源黑體)
無襯線中文字體，Android 系統的默認中文字體，由 Google 與 Adobe 推出的開源字體。除了中文簡體（Noto Sans CJK SC），還有中文繁體（ Sans CJK TC）。
WenQuanYi Micro Hei (文泉驛微米黑)
無襯線中文字體，Linux 系統的默認中文字體，用于兼容 Linux 系統。
Simsun (宋體)
襯線中文字體，風格明顯，支持 Windows 與 macOS 系統。
sans-serif
一種無襯線字體系列，常見的兜底字體，在前面所有引用的字體都找不到時會生效，顯示當前瀏覽器默認的無襯線字體。
1. 怎么查看網頁項目的引用字體
打開瀏覽器的檢查，用選中功能點擊要查看的文字：
即可看到字體堆棧，以及當前生效的字體。
當選中的文本包含中文和西文時，即可看到當前生效的中西文字體。
如圖，由于在第一位的 -apple-system 生效，所以當前中文字體為 PingFang SC，西文字體為 .SF NS。
2. 愛奇藝
由于將蘋方寫在最前面，因此西文字體也是蘋方自帶的西文，所以寫在后面的 Helvetica 沒有生效。
有些會在網頁中顯示特定字體：
3. 騰訊官網
TencentSans
4. OPPO 官網
OPPO Sans
會發現在 Rendered Fonts 中顯示 TencentSans 和 OPPO Sans 為 Network resource，不同于知乎和愛奇藝渲染出的字體為 Local file。
因為特定字體除非用戶主動下載安裝，并不能確保存在于所有用戶的電腦內，僅僅用 font-family 引用，未安裝字體的電腦都無法渲染出來。
方法一：
將需要使用的字體文件下載后放在服務器上，用 @font-face 將字體文件作為一個資源應用到 CSS 文件。
為了兼容不同瀏覽器需要準備多種字體格式文件，字體格式文件與瀏覽器的兼容情況：
.ttf / .otf
Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Safari4.2+。
.woff
IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+。
.eot
IE4+ 專用。
.svg
主要針對 Safari 做兼容。
方法二：
谷歌提供了一個網站 Google Fonts 可以下載、或者鏈接字體資源庫。
方法三：
有種技術可以將網站用到的文字按需截取并生成 .ttf .eot .woff .svg 四種能支持所有瀏覽器的字體格式文件，將字體體積優化到最小。也有第三方網站支持，比如有字庫網站只要提交需要使用的字體，或者提供一段 js 代碼即可實現。
方法四：
如果項目中只是少量地方使用特殊字體，可以考慮切圖，導出 .svg 格式（比 .png 更清晰）導出前，將文本輪廓化，使文字變成形狀，不然可能會導致 svg 內部字體失效，如下圖：
用 font-family 的屬性引用不可商用的字體，并且網頁中也能顯示這種字體，不會構成侵權問題，也不需要進行額外的授權許可。因為能夠用 font-family 引用成功的字體是用戶系統內本身就存在的字體。
但這只限于在電腦中顯示，如果對網頁截下來的圖片用于宣傳，就脫離了電腦系統的范圍，這時沒有購買字體版權的話就屬于侵權。
使用 @font-face 需要將字體文件下載后上傳項目或服務器引用，使頁面顯示字體不再依賴用戶系統自帶字體，這時如要使用到不可商用的字體，需要購買字體版權，否則就屬于侵權。
設定字體字重的屬性 font-weight 的值可以使用短語或者數字（權重級別），短語有效值為 normal 和 bold，數字的有效值為 100-900。
短語的 normal 對應數字的 400，也就是設計軟件中常見到的“常規體“，bold 對應 700。
瀏覽器在渲染字體的時候，會從字體中找到對應的權重級別進行渲染，但并不是每個字體都有 100-900 的權重級別，有些字體只提供 normal 和 bold 兩種字重，就拿常見的 Arial 和 Noto Sans（思源黑體）中西文混合舉例：
上圖看起來西文字體會比中文字體更粗一些，在設計軟件內設置字體為“中粗體”，那么 font-weight 的值就為 500。
由于西文 Arial 只有 normal 和 bold 兩種字重，500 的權重級別大于了 normal 對應的 400，所以顯示了 bold(700)，而 Noto Sans (思源黑體)字體提供了對應 500 的中粗體，因此出現了中西文字體的字重不統一。
1. 字由
網址：https://www.hellofont.cn/font-list
2. 優設字體導航
網址：https://hao.uisdc.com/font/
3. Google Fonts
網址：https://www.googlefonts.cn/chinese
文章來源：優設網 作者：干了這噸檸檬汁
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計(m.wowo44.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
關鍵詞：UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、用戶體驗公司、軟件界面設計公司、軟件qt開發、軟件wpf開發、軟件vue開發。
