CSS中Font语法的缩写
程序员文章站
2022-07-15 11:29:39
...
今天同事提了一个问题，说看到一段css代码，大概如下
font: 300 15px/1.65 arial,sans-serif;
对于前面的300和15px/1.65不理解，难道是除法的意思？
上网搜索，在W3School 这里没有找到详细语法，后在一些问答类帖子中找到了答案SOSO问问
答案如下：
写道
字体大小和行高的缩写，分开：font-size:12px;line-height:36px;
也就是“/”前的为字体大小，后面的为行高，例子中应该是1.65倍的意思，这是一种css的缩写语法（哎，css方面还真是白~~）
再后来在一本《CSS权威指南》中找到了详细的答案，摘录如下
《CSS权威指南》p127 写道
font
值：[[<font-style> || <font-variant> || <font-weight>]?<font-size>[/<line-height>]?<font-family>] | caption | icon | menu | message-box | small-caption | status-var | inherit
初始值： 根据单个属性
应用于： 所有元素
继承性： 有
百分数： 对于<font-size>要相对于父元素来计算；对于<line-height>则相对于元素的<font-size>来计算
计算值： 见单个属性（font-style等）
值：[[<font-style> || <font-variant> || <font-weight>]?<font-size>[/<line-height>]?<font-family>] | caption | icon | menu | message-box | small-caption | status-var | inherit
初始值： 根据单个属性
应用于： 所有元素
继承性： 有
百分数： 对于<font-size>要相对于父元素来计算；对于<line-height>则相对于元素的<font-size>来计算
计算值： 见单个属性（font-style等）
此外，font的前三个值允许采用任意的顺序，后两个值要严格按此顺序（font-size在前，font-family在后），而且font声明中必须有这两个值。
另外就是可以在font-size后面使用 / 增加line-height属性，这是可选的。
最后说一下前面的300，这个是font-weight属性，参考如下
W3School
写道
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
此外可以使用数字：100,200,300...900
数字含义：定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
此外可以使用数字：100,200,300...900
数字含义：定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。