CSS font 属性是用于同时设置font-family、font-style、font-size、font-weight、font-variant和line-height属性的简写属性。
和其它的CSS简写属性一样,font
属性中未被设置的属性值使用它们各自的初始值,并覆盖之前由非简写的属性设置的值。
使用font
属性时需要注意以下几条规则:
- 除了使用关键字的情况之外,该属性必须同时设置 font-size 和 font-family 属性值。
- 并非所有的 font-variant 属性值是被允许的。只有在 CSS 2.1 里规定的值才被允许使用,它们是
normal
和small-caps
。 - 尽管 font-stretch,font-size-adjust 和
font-kerning
不会由font
直接设置,它们仍然会被重置为初始值。 font
属性值的顺序并非完全自由:如需设置 font-style,font-variant 和 font-weight 中任意一个或几个的值,它们必须要放在 font-size 值的前面。 line-height 值必须紧跟在 font-size 之后,并且要在属性值前面加上 “/” 。最后, font-family 是必不可少的,且必须放在最后(inherit 值是无效的)。
通过关键字来使用系统字体
通过在font
属性中使用预定义的关键字作为值,可以为元素设置某种系统字体。
可以作为设置系统字体的关键字有:
- caption:用于标题控件(如按钮,下拉列表等)的字体。
- icon:用于标签图标的字体。
- menu:菜单中(如下拉菜单和菜单列表)使用的字体。
- message-box:用于对话框的字体。
- small-caption:用于小标号控件的字体。
- status-bar:用于窗口状态栏的字体。
我们只能通过font
属性来设置系统字体,而不能通过font-family属性来设置。每一个关键字都代表了操作系统中的一类字体。使用某个关键字可以为元素应用当前操作系统中的指定类别的字体。例如,如果使用font: message-box
会使元素应用当前操作系统对话框的字体作为字体。
系统字体的样式,大小,粗细等只能够同时设置。如果需要的话可以单独对它们进行修改。请注意下面两行使用font
属性来设置字体的区别:
font: menu; /* 使用系统菜单字体作为字体 */ font: large menu; /* 使用一种font-family为"menu"的字体作为字体 */
官方语法
font: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar
当使用font
属性来设置非系统字体时,语法如下:
font: [font-stretch] [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family]
font-family
和font-size
属性必须设置。font-size
和line-height之间要使用“/”符号来分隔。
参数:
- font-stretch:参考font-stretch属性的介绍。
- font-style:参考font-style属性的介绍。
- font-variant:参考font-variant属性的介绍。
- font-weight:参考font-weight属性的介绍。
- font-size:参考font-size属性的介绍。
- line-height:参考font-height属性的介绍。
- font-family:参考font-family属性的介绍。
当使用font
属性来设置系统字体时,语法如下:
font: caption | icon | menu | message-box | small-caption | status-bar
- caption:用于标题控件(如按钮,下拉列表等)的字体。
- icon:用于标签图标的字体。
- menu:菜单中(如下拉菜单和菜单列表)使用的字体。
- message-box:用于对话框的字体。
- small-caption:用于小标号控件的字体。
- status-bar:用于窗口状态栏的字体。
font
属性的初始值为各个单独字体属性的初始值。
应用范围
font
属性可以应用在所有的元素上。
示例代码
例如下面的代码使用font
属性来设置非系统的字体。
p { font: 12pt/14pt sans-serif } p { font: 50% sans-serif } p { font: x-large/110% "Microsoft YaHei", serif } p { font: bold italic large Palatino, serif } p { font: normal small-caps 120%/120% fantasy } p { font: condensed oblique 12pt "Helvetica Neue", serif; }
第二行代码的50%表示字体的尺寸为它的父元素字体尺寸的一半。
第三行代码的行高110%表示行高为字体的1.1倍。
第四行代码设置字体为粗体,样式为斜体,字体大小为关键字large
。
第五行代码设置font-variant为小型大写字体(small-caps
),字体大小为它的父元素字体大小的1.2倍,行高是字体大小的1.2倍。
下面的代码使用font
属性来设置系统字体。
button { font: menu }
如果当前操作系统的菜单字体为14像素的“Microsoft YaHei”字体,字体的粗细为600,那么上面的代码会被解析为:
button { font: 600 14px "Microsoft YaHei" }
没有被设置的字体属性会被设置为它们各种的初始值:
button { font-style: normal; font-variant: normal; font-weight: 600; font-size: 14px; line-height: normal; font-family: "Microsoft YaHei"; }
浏览器支持
所有的现代浏览器都支持font
属性,包括Chrome, Firefox, Safari, Opera, Internet Explorer 以及 Android 和 iOS。