前端必知必会-CSS字体Font（上）

---

CSS 字体

为您的网站选择正确的字体很重要！

字体选择很重要
选择正确的字体对读者体验网站的方式有很大影响。

正确的字体可以为您的品牌创造强大的身份。

使用易于阅读的字体很重要。字体可以为您的文本增加价值。为字体选择正确的颜色和文本大小也很重要。

通用字体系列
CSS 中有五种通用字体系列：

衬线字体在每个字母的边缘都有一条小笔画。它们营造出一种正式和优雅的感觉。
无衬线字体线条清晰（没有附加小笔画）。它们营造出现代简约的外观。
等宽字体 - 这里所有字母都有相同的固定宽度。它们营造出机械外观。
草书字体模仿人类笔迹。
幻想字体是装饰性/俏皮的字体。
所有不同的字体名称都属于通用字体系列之一。

Serif 字体和 Sans-serif 字体之间的区别
Serif 与 Sans-serif
注意：在计算机屏幕上，无衬线字体被认为比衬线字体更容易阅读。

CSS font-family 属性

在 CSS 中，我们使用 font-family 属性来指定文本的字体。

注意：如果字体名称不止一个单词，则必须用引号引起来，例如：“Times New Roman”。

提示：font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。从您想要的字体开始，以通用字体系列结束（如果没有其他字体可用，则让浏览器在通用字体系列中选择类似的字体）。字体名称应以逗号分隔。

示例
为三个段落指定一些不同的字体：

.p1 {
font-family: "Times New Roman", Times, serif;
}

.p2 {
font-family: Arial, Helvetica, sans-serif;
}

.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}

CSS Web 安全字体

Web 安全字体是普遍安装在所有浏览器和设备上的字体。

后备字体
但是，没有 100% 完全安全的 Web 字体。总有可能找不到字体或字体安装不正确。

因此，始终使用后备字体非常重要。

这意味着您应该在 font-family 属性中添加一个类似的“备用字体”列表。如果第一个字体不起作用，浏览器将尝试下一个，再下一个，依此类推。始终以通用字体系列名称结束列表。

示例
这里有三种字体类型：Tahoma、Verdana 和 sans-serif。第二和第三种字体是备用字体，以防找不到第一个字体。

p {
font-family: Tahoma, Verdana, sans-serif;
}

适用于 HTML 和 CSS 的最佳 Web 安全字体
以下列表是适用于 HTML 和 CSS 的最佳 Web 安全字体：

Arial（无衬线）
Verdana（无衬线）
Tahoma（无衬线）
Trebuchet MS（无衬线）
Times New Roman（衬线）
Georgia（衬线）
Garamond（衬线）
Courier New（等宽字体）
Brush Script MT（草书）
注意：在发布网站之前，请务必检查字体在不同浏览器和设备上的显示效果，并始终使用后备字体！

CSS 字体后备

常用字体后备
以下是一些常用字体后备，按 5 个通用字体系列组织：

• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy

---

总结

本文介绍了的CSS字体Font使用，如有问题欢迎私信和评论