[分享]css中font属性按什么顺序

CSS中的font属性是用来设置字体相关属性的，比如字体大小、字形、粗细、颜色等等。我们设置font属性时需要按照一定的顺序来书写，具体如下：fontstyle fontvariant fontwei...

CSS中的font属性是用来设置字体相关属性的，比如字体大小、字形、粗细、颜色等等。我们设置font属性时需要按照一定的顺序来书写，具体如下：

font-style font-variant font-weight font-size/line-height font-family 

这里是各个属性的作用：

• font-style：设置字体风格，比如斜体（italic），正常（normal）等
• font-variant：设置字体变体，比如小型大写字母
• font-weight：设置字体粗细，可以是数字（100-900）或者关键字（normal，bold，bolder等）
• font-size/line-height：设置字体大小和行间距，可以写成单独的属性（font-size和line-height），也可以写成合并的属性（比如16px/1.5）
• font-family：设置字体，可以是现有的系统字体，也可以是自定义字体（需要使用@font-face）

我们需要按照以上顺序书写，不管是单独设置某个属性还是合并设置，都需要按照这个顺序。比如下面这个例子：

font: italic small-caps bold 16px/1.5 'Helvetica Neue', sans-serif; 

这里就是将所有属性合并写在了一起，但是顺序是没有问题的，可以正确解析。如果我们按照其他的顺序，比如这样：

font-family 'Helvetica Neue', sans-serif font-size 16px font-weight bold 

这样就会出现解析错误，导致设置不起效果。

所以，记住font属性书写顺序，可以避免很多无谓的错误和调试。