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.