CSS Web 安全字型

Created: October-16, 2018

Web 安全字型是非常常見的字型，最常見於各種作業系統，如 Windows，Mac，Linux 等。

為什麼選擇 Web 安全字型

可能是你嘗試在網頁上使用的字型未按預期顯示的情況，因為所有字型都不適用於所有計算機系統。

為確保在大多數瀏覽器或作業系統上準確呈現文字，你必須非常仔細地定義字型。 font-family CSS 屬性可以容納幾種字型名作為備用系統。首先使用你想要的字型，然後填寫第一個字型（如果不可用）。

你應該總是結束列表與通用字型家族，其中有五個： serif ， sans-serif ， monospace ， cursive 和 fantasy 。如果沒有你定義的任何字型，則通用字型系列允許瀏覽器選擇類似的字型。

下表列出了最安全使用的字型組合。

字型系列	正常	膽大
Arial，Helvetica，sans-serif	這是普通文字。	這是粗體文字。
“Times New Roman”，Times，serif	這是普通文字。	這是粗體文字。
“Courier New”，Courier，monospace	這是普通文字。	這是粗體文字。

以下示例說明如何以 font-family 正確的方式設定屬性。

.sans-serif-font {
    font-family: Arial, Helvetica, sans-serif;
}
.serif-font {
    font-family: "Times New Roman", Times, serif;
}
.monospace-font {
    font-family: "Courier New", Courier, monospace;
}

常用字型組合

下表列出了一些常用字型組合，按通用族組織。

襯線字型

字型系列	正常	膽大
喬治亞，襯線	這是普通文字。	這是粗體文字。
“Times New Roman”，Times，serif	這是普通文字。	這是粗體文字。
“Palatino Linotype”，Palatino，“Book Antiqua”，serif	這是普通文字。	這是粗體文字。

Sans-Serif 字型

字型系列	正常	膽大
Arial，Helvetica，sans-serif	這是普通文字。	這是粗體文字。
“Arial Black”，Gadget，sans-serif	這是普通文字。	這是粗體文字。
Impact, Charcoal, sans-serif	這是普通文字。	這是粗體文字。
Tahoma，Geneva，sans-serif	這是普通文字。	這是粗體文字。
“Trebuchet MS”，Helvetica，sans-serif	這是普通文字。	這是粗體文字。
Verdana，Geneva，sans-serif	這是普通文字。	這是粗體文字。

等寬字型

字型系列	正常	膽大
Courier, monospace	這是普通文字。	這是粗體文字。
“Courier New”，Courier，monospace	這是普通文字。	這是粗體文字。
“Lucida Console”，摩納哥，monospace	這是普通文字。	這是粗體文字。

草體

字型系列	正常	膽大
“Comic Sans MS”，cursive	這是普通文字。	這是粗體文字。
“Courier New”，Courier，monospace	這是普通文字。	這是粗體文字。
“Lucida Console”，Monaco，monospace	這是普通文字。	這是粗體文字。

Fantasy 字型

沒有任何 Fantasy 字型在瀏覽器和作業系統中具有良好的可用性。

警告： 字型（Verdana，Georgia，“Comic Sans MS”，“Trebuchet MS”，“Arial Black”，Impact）適用於 Windows 和 MacOS，但不適用於 Unix + X.