在CSS开发中,font属性用于统一设置文本的字体系列、大小、粗细、行高等字体相关样式,其综合写法可以把多个单独的字体属性合并成一条声明,减少代码冗余,提升样式的可维护性。

font属性综合写法的基本语法
font属性的综合写法有固定的参数顺序,语法格式如下:
/* 完整语法顺序 */ font: font-style font-variant font-weight font-size/line-height font-family;
其中font-size和font-family是必填项,其余参数都是可选项,如果省略可选项,会使用对应属性的默认值。
各参数说明与示例
必填参数
- font-size:设置字体的大小,支持px、em、rem等单位,也可以是用关键字如small、large等。
- font-family:设置字体系列,可以设置多个备选字体,用逗号分隔,最后一个通常是通用字体系列如sans-serif、serif等。
可填参数
- font-style:设置字体样式,可选值有normal、italic、oblique,默认值为normal。
- font-variant:设置小型大写字母显示,可选值有normal、small-caps,默认值为normal。
- font-weight:设置字体粗细,可选值有normal、bold、数字100-900等,默认值为normal。
- line-height:设置行高,需要跟在font-size后面用斜杠分隔,支持数字、px等单位,默认值为normal。
实际代码示例
下面是一个完整的font综合写法示例,设置了斜体、小型大写字母、加粗、16px字体大小、1.5倍行高,字体系列为Arial和通用无衬线字体:
.text {
/* 综合写法设置字体样式 */
font: italic small-caps bold 16px/1.5 Arial, sans-serif;
}
如果只需要设置字体大小和字体系列,其他使用默认值,写法可以简化:
.simple-text {
/* 省略可选参数,只保留必填项 */
font: 14px "Microsoft YaHei", serif;
}
常见错误写法与修正
很多开发者写font综合写法时容易出错,以下是常见错误和对应的修正方法:
| 错误写法 | 错误原因 | 修正后写法 |
|---|---|---|
| font: 16px/1.5 Arial, sans-serif bold; | font-weight位置错误,必须放在font-size/line-height之前 | font: bold 16px/1.5 Arial, sans-serif; |
| font: Arial, sans-serif 16px; | 参数顺序错误,font-size和font-family必须在最后,且font-size要在font-family前面 | font: 16px Arial, sans-serif; |
| font: 16px; | 缺少必填的font-family参数 | font: 16px sans-serif; |
注意事项
使用font综合写法时,如果同时单独设置了某个字体相关属性,综合写法的声明会覆盖之前的单独属性,因为CSS中后声明的样式优先级更高。如果需要保留某个单独设置的属性,就不要使用综合写法,或者把综合写法放在单独属性之前。
另外,如果font-family中包含多个单词的字体名称,需要用单引号或者双引号包裹,比如"Microsoft YaHei",避免解析错误。