前，瀏覽器只能展示本地安裝的字體。如果字體未安裝，網頁顯示效果會大打折扣。

為了解決這個問題，CSS 引入 web 字體，允許瀏覽器從服務器下載字體，下載完成后再重新渲染字體。

字體文件格式

使用 web 字體前，需要了解常用的字體文件格式。

TTF 字體文件，即 TrueType 字體，是由蘋果和微軟在 20 世紀 80 年代末開發的字體標準。它是 macOS 和 Windows 操作系統使用最廣泛的字體格式。

OTF 字體文件，即 OpenType 字體，是一種可縮放的計算機字體格式。它建立在 TrueType 基礎上，是微軟的注冊商標。OpenType 字體目前在主要的計算機平臺上廣泛使用。

WOFF 字體文件，即 The Web Open Font Format 字體，是一種用于網頁的字體格式，2009 年開發，如今是 W3C（萬維網聯盟）的推薦標準。WOFF 本質是 OpenType 或 TrueType 字體，但是經過壓縮并附加額外的元數據。在帶寬受限的網絡中，WOFF 能更好的支持從服務器到客戶端的字體傳輸。

WOFF 2.0 字體文件，相比于 WOFF，提供了更高的壓縮效率。

SVG 字體，將 SVG 用作顯示文本時的字形。SVG 1.1 規范定義了一個字體規范，允許在 SVG 文檔中創建字體。

EOT 字體文件，即 Embedded OpenType Fonts 文件，是微軟設計的一種用于網頁的嵌入式字體，它是 OpenType 字體的緊湊形式。

不同字體格式的瀏覽器兼容性下圖所示：

使用自定義字體

使用 @font-face CSS 指令定義自定義字體。使用前需要把字體文件放在服務器目錄，然后定義新的字體名稱，并指向字體所在位置。

以京華老宋體為例，這是一款可以免費商用的中文字體。下載字體文件后，放到和 index.html 同級的目錄，重命名為 jh-song.ttf。

在 @font-face 指令內，使用 font-family 定義字體名稱，src 屬性定義字體文件路徑。

然后，像使用普通字體一樣，使用自定義字體樣式：

完

么是Web安全字體

網絡安全字體是由許多操作系統預先安裝的字體。雖然不是所有的系統都安裝了相同的字體，但你可以使用網絡安全字體堆棧來選擇幾種看起來類似的字體，并且安裝在你想支持的各種系統上。如果你想使用預裝字體以外的字體，從CSS3開始，你可以使用網絡字體Web fonts - Learn web development | MDN。

Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems that you want to support. If you want to use fonts other than ones pre-installed, as of CSS3, you can use Web Fonts.

• 英文Web安全字體合集 CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

沒有網頁安全中文字體

相比通常只有幾十 KB 的英文字體，網頁加載一個 GB2312 的中文字體至少要增加 2 MB 以上加載量，而大部分中文字體都在 5 MB 以上。所以網絡字體在國內沒有流行起來，還是要像英文網頁好多年前一樣，用網頁安全字體。

下表可以看到各系統預置的中文字體——各系統根本沒有相同的字體，即沒有網頁安全中文字體！

什么是網絡字體

與網絡安全字體不同，網絡字體沒有預先安裝在用戶的系統中。這些字體是由用戶的瀏覽器在渲染網頁時下載的，然后應用于你的文本。使用網絡字體的主要缺點是它會減慢你網站的加載時間。在舊的瀏覽器中，對CSS3的支持也很有限，而使用網絡字體是需要CSS3的。后面的限制可以通過使用字體堆棧來彌補，類似于網絡安全字體堆棧，但包括一個網絡字體作為堆棧的第一個字體。如果瀏覽器無法使用網絡字體，它就會退回到堆棧中的網絡安全字體。

Unlike web safe fonts, web fonts are not pre-installed on the user's system. The fonts are downloaded by the user's browser while rendering the webpage, and then applied to your text. The main drawbacks of using web fonts is it will slow your site's load time. There is also limited support for CSS3 in older browsers which is required to use web fonts. The later limitation can be remedied by using a font stack, similar to the web safe font stacks, but including a web font as the first font of the stack. If a browser is unable to use the web font it will fall back on the web safe fonts in the stack.

Web 字體是一種 CSS 特性，允許我們指定在訪問時隨您的網站一起下載的字體文件，這意味著任何支持 Web 字體的瀏覽器都可以使用指定的字體。所需的語法如下所示：

首先，在 CSS 的開始處有一個@font-face塊，它指定要下載的字體文件：

@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}

在這個下面，你可以使用 @font-face 中指定的字體種類名稱來將你的定制字體應用到你喜歡的任何東西上，比如說：

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

關于網頁字體有兩件重要的事情要注意：

1. 瀏覽器支持不同的字體格式，因此需要多種字體格式以獲得良好的跨瀏覽器支持。例如，大多數現代瀏覽器都支持 WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web 開放字體格式版本 1 和 2)，它是最有效的格式，但是舊版本 IE 只支持 EOT (Embedded Open Type，嵌入式開放類型) 的字體，你可能需要包括一個 SVG 版本的字體支持舊版本的 iPhone 和 Android 瀏覽器。
2. 字體一般都不能自由使用。我們必須為他們付費，或者遵循其他許可條件，比如在代碼中 (或者在站點上) 提供字體創建者標識。你不應該在沒有適當的授權的情況下偷竊字體。

字體類型 - 常見字體族

serif 襯線字體族

serif 是一種具有裝飾性小橫線的字體族，這些小橫線被稱為“襯線”。Serif 字體通常被用于印刷材料中，如書籍、雜志、報紙等，因為它們的襯線可以增強字體的可讀性和易讀性。常見的 Serif 字體包括 Times New Roman、Georgia、和 Garamond。

sans-serif 無襯線字體族

sans-serif 是一種不帶裝飾性小橫線的字體族。這種字體通常被用于數字屏幕上，如電腦、手機和電視。與 Serif 字體相比，Sans-serif 字體看起來更現代、更簡潔。常見的 Sans-serif 字體包括 Arial、Helvetica 和 Verdana。

monospace 等寬字體族

monospace 是一種字母寬度相等的字體族，每個字符都占據相同的寬度。Monospace 字體通常用于計算機編程、打印機輸出和其他需要對齊文本的應用程序。常見的 Monospace 字體包括 Courier、Consolas 和 Monaco。

cursive 手寫字體族

cursive 是一種仿效手寫的字體族，具有曲線、流暢的線條。這種字體通常被用于設計師、藝術家和文具愛好者等需要體現個性和藝術感的場合。常見的 Cursive 字體包括 Brush Script、Lucida Calligraphy 和 Comic Sans。

fantasy 夢幻字體族

fantasy 是一種具有藝術性和獨特性的字體族，經常用于海報、書籍封面和廣告等場合。這種字體的外形往往是有趣、古怪、奇特或裝飾性的，常常包含有裝飾性的花紋或圖案。常見的 Fantasy 字體包括 Harrington、Viner Hand ITC 和 Zapfino。

Script 手寫字體族

Script 字體族是一類字體，通常被設計用于模擬手寫或手繪效果，以及營造一種自然、隨意的藝術氛圍。這類字體通常具有不規則的筆畫、流暢的曲線和變化多端的字母間距，使得文本看起來像是手寫而非打印。Script 字體族的應用領域非常廣泛，例如印刷品設計、標志設計、廣告設計等。常見的 Script 字體有 Brush Script、Lobster、Pacifico、Vibur 等。

總結

為了確保中文字符在不同計算機和瀏覽器上的正確顯示，網頁設計or開發者可以考慮：

1. 使用 Web 服務商提供的字體庫：像 Google Fonts、Adobe Fonts 等服務商提供了很多中英文字體庫，這些字體可以被網頁直接引用，無需用戶安裝字體即可正常顯示。
2. 使用圖像或矢量圖形：將中文字符轉換為圖像或矢量圖形，并將其嵌入到網頁中。雖然這種方法可以確保字符在不同瀏覽器和計算機上的正確顯示，但其缺點是無法進行文本搜索和復制粘貼等操作。
3. 引用多個字體：如果設計者希望在網頁中使用多種中文字體，可以在 CSS 樣式表中指定多個備選字體。例如：font-family: "宋體", "SimSun", "Microsoft YaHei", "微軟雅黑", sans-serif;

需要注意的是，盡管某些字體在設計中看起來很不錯，但并不一定適合用作 Web 安全字體。設計or開發者需要權衡字體的外觀和可用性，選擇最適合自己需求的中文 Web 安全字體。

參考

• Web fonts - Learn web development | MDN
• CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.
• 中文網頁字體設置 | inDev. Journal
• serif，sans-serif，monospace，cursive和fantasy - 騰訊云開發者社區-騰訊云