DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!
font-family
属性定义应用于所选元素的字体。所选字体不是单个字体面,而是一个“系列”,因此可能取决于其他排版属性值才能在系列中选择正确的字体面。
body {
font-family: Arial, Helvetica, sans-serif;
}
值可以是以下之一:
- 与页面上嵌入或用户系统上可用的字体匹配的字体系列名称。
- 一系列用逗号分隔的字体系列名称,其中可以包含通用字体系列名称。
如果使用了多个字体系列名称,浏览器将选择它找到的第一个字体系列名称,这些名称要么使用@font-face
嵌入到页面中,要么安装在用户的操作系统上。
对于font-family
,没有特定的默认值或初始值;初始值始终取决于浏览器和/或操作系统。
通用字体系列名称
如果为单个声明使用了多个值,建议将通用字体系列列在最后作为后备,以确保最佳的排版体验。
code {
font-family: Courier, Monaco, monospace;
}
在上面的示例中,“Courier”和“Monaco”是实际字体的真实字体系列名称,而“monospace”只是一个对用户系统上安装的任何等宽字体的通用引用。
如果找不到安装的前两个字体系列,浏览器将选择最佳选项,但仅限于等宽字体。如果没有通用字体系列,字体将默认为用户系统上的默认字体(可能是衬线或非衬线),这将是不希望看到的。
通用字体系列名称包括serif
、sans-serif
、cursive
、fantasy
和monospace
。
如果字体系列名称与通用字体系列名称匹配,则应将字体系列名称用引号括起来,以指示它不是通用字体系列。
多词字体系列名称
如果字体系列名称包含用空格分隔的多个单词,建议将字体系列名称用引号(单引号或双引号)括起来。
code {
font-family: "Times New Roman", Georgia, serif;
}
这并非总是必要的,但通常更安全的做法是为任何包含空格或特殊字符的字体系列名称包含引号。
相关属性
其他资源
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
有效 | 有效 | 有效 | 有效 | 有效 | 有效 | 有效 |
“建议将字体族名称用引号(单引号或双引号)括起来”
为什么?
因为规范中建议这样做。但是,实际上并不总是必要的……如果你想了解这方面的真实情况,请阅读这篇文章
https://mathiasbynens.be/notes/unquoted-font-family
你可以使用这个相关的工具进行测试
https://mothereff.in/font-family
因为解释器“可能”会误解它,并产生不需要的输出
很有趣。Chromium(37版本)不需要用逗号分隔不同的字体族名称,因此font-family:”ubuntu mono”,”Liberation Sans”,”serif”; 等同于 font-family:”ubuntu mono” “Liberation Sans” “serif”; 附注:Firefox(同样是37版本)只有当一系列字体族名称用逗号分隔时才能正常工作。
对为什么在字体族值上使用引号的推荐解释。在图片下方的“通用字体族名称”的第二段中,作者应该针对初学者做一些更深入的解释。
这些引号没有理由使用,我只是用它们来引用示例中的内容。
好的,谢谢