
font-family
font-family 可以把多个字型名称作为一个“回退”系统来保存。如果浏览器不支持第一个字型,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字型族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
基本介绍
- 外文名:font-family
- 版本:CSS1
- 继承性:有
- 兼容性:Firefox Chrome Safari Opera
- 参数值:family-name、inherit
基本信息
如果浏览器不支持第一个字型,则会尝试下一个。也就是说,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:"Microsoft YaHei UI",Arial,"Times New Roman";
初学者可能会觉得很疑惑。为什幺要为元素同时定义多个字型呢?
设定优先权
设计页面时一般设计师会选定特定的一个字型以达到理想的效果,但更多情况下用户的电脑可能没有安装该字型。此时就要用font-family设定一个列表,靠前的字型优先显示,如果没有安装则往后轮一个,以此类推。保证网页不会因为没有相应字型就被系统使用了不好看的字型。
举个例子:
font-family:"Hiragino Sans GB","Lantinghei SC","Microsoft YaHei UI",SimHei,sans-serif
上例中,前两项("Hiragino Sans GB","Lantinghei SC")是Mac机内置的字型,后两项("MicrosoftYaHeiUI",SimHei)是Windows机内置的字型。假定第一项(HiraginoSansGB)是设计师选定的理想字型,后面三个字型都和第一项字形相近,保证了网页不会使用不好看的字型。最后的(sans-serif)保证以上字型全部没有的超特殊情况下不会设定“没有字型”。
中西文分别指定字型
设计页面时有时会遇到中文和西文需要使用不同字型搭配使用的情况,这时就要把西文字型靠前放。因为西文字型只包含字母和数字而不包含汉字,在高优先权下被使用时汉字自然会轮到优先权低的字型来显示。如果中文字型优先权较高,则会导致指定的西文字型不会被显示。
举个例子:
font-family:"Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Microsoft YaHei UI",sans-serif
上例中,前三项是西文字型("HelveticaNeue",Helvetica,Arial,),其中前两项是Mac机内置字型,后一项(Arial)是Win与Mac兼有的字型,但不够理想。后两项("HiraginoSansGB","MicrosoftYaHeiUI")同前一例。
Windows平台的默认情况下,浏览器的字型是宋体。中文字型常用的有宋体、微软雅黑,英文字型比较常用的有Times New Roman、Arial。
浏览器支持
所有主流浏览器都支持 font-family 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。