font-family

语法

font-family : name

font-family : cursive | fantasy | monospace | serif | sans-serif

参数

name :字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格，则应使用引号括起

第二种声明方式使用所列出的字体序列名称。如果使用fantasy序列，将提供默认字体序列

说明

设置或检索用于对象中文本的字体名称序列。

默认值由浏览器确定。

序列可包含嵌入字体字体。请参阅@font-face规则。

对应的脚本特性为fontFamily。请参阅我编写的其他书目。

示例

div.fixedwidth { font-family: Courier, "Courier New", monospace }

用法

你有时查看网页源代码，会看到类似下方的代码：

初学者可能会觉得很疑惑。为什么要为元素同时定义多个字体呢？

设定优先级

设计页面时一般设计师会选定特定的一个字体以达到理想的效果，但更多情况下用户的电脑可能没有安装该字体。此时就要用font-family设定一个列表，靠前的字体优先显示，如果没有安装则往后轮一个，以此类推。保证网页不会因为没有相应字体就被系统使用了不好看的字体。

举个例子：

上例中，前两项（"Hiragino Sans GB","Lantinghei SC"）是Mac机内置的字体，后两项（"MicrosoftYaHeiUI",SimHei）是Windows机内置的字体。假定第一项（HiraginoSansGB）是设计师选定的理想字体，后面三个字体都和第一项字形相近，保证了网页不会使用不好看的字体。最后的（sans-serif）保证以上字体全部没有的超特殊情况下不会设置“没有字体”。

中西文分别指定字体

设计页面时有时会遇到中文和西文需要使用不同字体搭配使用的情况，这时就要把西文字体靠前放。因为西文字体只包含字母和数字而不包含汉字，在高优先级下被使用时汉字自然会轮到优先级低的字体来显示。如果中文字体优先级较高，则会导致指定的西文字体不会被显示。

举个例子：

上例中，前三项是西文字体（"HelveticaNeue",Helvetica,Arial,），其中前两项是Mac机内置字体，后一项（Arial）是Win与Mac兼有的字体，但不够理想。后两项（"HiraginoSansGB","MicrosoftYaHeiUI"）同前一例。

Windows平台的默认情况下，浏览器的字体是宋体。中文字体常用的有宋体、微软雅黑，英文字体比较常用的有Times New Roman、Arial。^[1]

浏览器支持

所有主流浏览器都支持 font-family 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

参考资料

[1] 如何优雅的选择字体(font-family) · SegmentFault[引用日期2017-11-25]