網(wǎng)頁字體 font-family 屬性詳解

時間：2023-09-22 21:12:01 | 來源：網(wǎng)站運營

時間：2023-09-22 21:12:01 來源：網(wǎng)站運營

網(wǎng)頁字體 font-family 屬性詳解：

問題描述

當我們拿到設計稿去實現(xiàn)一個網(wǎng)頁時，經(jīng)常會發(fā)現(xiàn)設計稿當中一般使用的字體都是 PingFang SC 這一款字體。這是因為我們的 UI 設計師 一般使用的都是 Mac 電腦制作的設計稿。但是我們并不能傻乎乎的就按照設計稿直接設置 font-family:PingFang SC;

因為在 Windows 系統(tǒng)下并沒有蘋方字體可以使用。所以我們需要靈活地去設置網(wǎng)頁的字體家族，在不同的系統(tǒng)下，不同的設備下，使用合適的字體，并且兼顧到中英文。并不是設計稿是什么字體，就必須設置為這款字體。

一般我們都會為 body 標簽，指定 font-family 屬性，為整個網(wǎng)頁設置統(tǒng)一的字體，而且盡可能的使用各個系統(tǒng)下的默認字體。

各大網(wǎng)站最新的 font-family

• 小米：Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
• 京東：Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"/5B8B/4F53",sans-serif;
• 天貓：font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
• Github：font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;

其中 system-ui，-apple-system，BlinkMacSystemFont ，Segoe UI ，Helvetica ，Arial 是在指定使用各個系統(tǒng)下默認的西文字體。

其中 "PingFang SC" ,Microsoft Yahei 指定各個系統(tǒng)下默認的中文字體。

其中 Hiragino Sans GB ,Heiti SC ,WenQuanYi Micro Hei 指定一些常見的中文字體。

font-family

對于 CSS 的 font-family 而言，設置時，它有兩類取值。

1. 一類是類似這樣的具體的字體族名定義：font-family: Arial 這里定義了一個具體的字體樣式，字體族名為 Arial;

關于字體族名，有很多種：

• Helvetica
• Arial
• PingFang SC
• Microsoft Yahei
• Hiragino Sans GB
• ...

1. 一類是通用字體族名，它表示一大類字體（并非單個），類似這樣：font-family: sans-serif 。

關于通用字體族名，有5種：

• serif 襯線字體族
• sans-serif 非襯線字體族
• monospace 等寬字體，即字體中每個字寬度相同
• cursive 草書字體
• fantasy 主要是那些具有特殊藝術效果的字體

襯線體和無襯線字體

就 Web 常用的一些字體而言，其實大體上分為襯線字體和無襯線字體。

襯線字體 -- 關鍵字為 serif，意為有襯線的字體，襯線的意思是在字符筆畫末端有叫做襯線的小細節(jié)的額外裝飾。

無襯線字體-- 關鍵字為sans-serif，也就是無襯線的意思。專指西文中沒有襯線的字體，與漢字字體中的黑體相對應。與襯線字體相反，該類字體通常是沒有襯線裝飾，字形端莊，筆畫橫平豎直。

對比著來看：

中文字體界，兩個有代表性的分類——宋體和黑體，分別對應著襯線字體和無襯線字體。

因為無襯線的字體結構簡單，在同等字號下，無襯線的字體看上去要比有襯線的更大，結構也更清晰，所以電子設備的屏幕上也偏好使用無襯線字體。

新增通用字體族關鍵字

• system-ui 系統(tǒng)默認字體
• emoji 用于兼容 emoji 表情符號字符

system-ui

簡單而言，font-family: system-ui 的目的就是在不同的操作系統(tǒng)的 Web 頁面下，自動選擇本操作系統(tǒng)下的默認系統(tǒng)字體。

默認使用特定操作系統(tǒng)的系統(tǒng)字體可以提高性能，因為瀏覽器或者 webview 不必去下載任何字體文件，而是使用已有的字體文件。font-family: system-ui 字體設置的優(yōu)勢之處在于它與當前操作系統(tǒng)使用的字體相匹配，對于文本內(nèi)容而言，它可以得到最恰當?shù)恼故尽?br>
-apple-system/BlinkMacSystemFont

話說回來。正如每個前端開發(fā)人員都知道的那樣，將一個功能納入規(guī)范是一回事，將其納入瀏覽器又是另一回事。

幸運的是，system-ui 的普及很快。Chrome 和 Safari 都可以在各種平臺上完全支持它。只有 Mozilla 和 Windows 相對落后。

考慮到不同平臺及向后兼容，在 macOS 和 iOS 上，我們需要使用 -apple-system 及 BlinkMacSystemFont 來兼容適配 system-ui 標準。

Segoe UI

Segoe UI 是 Windows 從 Vista 開始的默認西文字體族，只有西文，不支持漢字，屬于無襯線體。

它也表示一個系列而不是某一款單一字體。使用 font-family: Segoe UI 可以在 Windows 平臺及 Windows Phone 上選取最佳的西文字體展示。

Roboto

Roboto 是為 Android 操作系統(tǒng)設計的一個無襯線字體家族。

網(wǎng)站字體定義推薦寫法

以 Git-Hub 網(wǎng)站的 font-family 定義為例子：

{ font-family: system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto, Helvetica,Arial, sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;}

1. system-ui，使用各個支持平臺上的默認系統(tǒng)字體
2. -apple-system， 在一些稍低版本 Mac OS X 和 iOS 上，升級使用更為合適的舊金浙江文字體
3. BlinkMacSystemFont，針對一些 Mac OS X 上的 Chrome 瀏覽器，使用系統(tǒng)默認字體
4. segoe ui，在 Windows 及 Windows Phone 上選取系統(tǒng)默認字體
5. Roboto，面向 Android 和一些新版的的 Chrome OS
6. Helvetica,Arial，在針對不同操作系統(tǒng)不同平臺設定采用默認系統(tǒng)字體后，針對一些低版本瀏覽器的降級方案
7. sans-serif，兜底方案，保證字體風格統(tǒng)一，至少也得是無襯線字體

上述 5 個字體族定義，優(yōu)先級由高到底，可以看到，它們 5 個都并非某個特定字體，基本的核心思想都是選擇對應平臺上的默認系統(tǒng)字體。

使用系統(tǒng)默認字體的主要原因是性能。字體通常是網(wǎng)站上加載的最大/最重的資源之一。如果我們可以使用用戶機器上已有的字體，我們就完全不需要再去獲取字體資源，從而使加載時間明顯加快。
并且系統(tǒng)字體的優(yōu)點在于它與當前操作系統(tǒng)使用的相匹配，因此它的文本展示必然也是一個讓人舒適展示效果。

中文字體設置

當然國內(nèi)網(wǎng)站還要考慮到中文字體，因為上述 Git-Hub 是一個外文網(wǎng)站，所以沒有中文字體的需求。

• "PingFang SC" 蘋果默認的中文字體
• Microsoft Yahei windows默認的中文字體
• Heiti SC 黑體
• WenQuanYi Micro Hei 黑體，類似的還有冬青黑體Hiragino Sans GB
• "/5B8B/4F53" 宋體，也可以直接寫成 宋體

字體設置建議

1、盡量使用系統(tǒng)默認字體

2、兼顧中西，西文在前，中文在后

中文或者西文（英文）都要考慮到。由于大部分中文字體也是帶有英文部分的，但是英文部分又不怎么好看，但是英文字體中大多不包含中文。通常會先進行英文字體的聲明，選擇最優(yōu)的英文字體，這樣不會影響到中文字體的選擇，中文字體聲明則緊隨其次。

3、兼顧多操作系統(tǒng)

選擇字體的時候要考慮多操作系統(tǒng)。例如 MAC OS 下的很多中文字體在 Windows 都沒有預裝，為了保證 MAC 用戶的體驗，在定義中文字體的時候，先定義 MAC 用戶的中文字體，再定義 Windows 用戶的中文字體。

4、以字體族系列 serif 和 sans-serif 結尾