font-family

更新时间:2024-01-11 16:00

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

术语简介

font-family : name

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

参数

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

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

说明

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

默认值由浏览器确定。

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

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

示例

div.fixedwidth

用法

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

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

设定优先级

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

举个例子:

Mac

中西文分别指定字体

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

举个例子:

HelveticaArial

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

浏览器支持

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

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值

免责声明
隐私政策
用户协议
目录 22
0{{catalogNumber[index]}}. {{item.title}}
{{item.title}}