css中font属性按什么顺序

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

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

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属性书写顺序,可以避免很多无谓的错误和调试。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中font属性按什么顺序

粉丝

0

关注

0

收藏

0

已有0次打赏