CSS 中 font: 14px/20px 属性到底在做什么？

css 中的 font: 14px/20px 属性解析

在 css 中，font 属性用于定义文本的字体相关样式。当您遇到类似 font: 400 14px/20px roboto, sans-serif 这样的属性定义时，它可能会令人困惑，尤其是不清楚 "/20px" 部分的含义。

属性拆分

要理解这个属性，我们可以将它拆分成各个部分：

• 400：表示字体的粗细，在这种情况下为标准字重。
• 14px：定义字体的尺寸。
• /20px：分隔符后定义行高，也就是相邻两行文字之间的垂直间距。

行高的作用

行高是一个重要的文本样式属性，它影响文本的可读性和美观度。它定义了文本行之间的垂直空间，有效地控制文本的紧凑程度和清晰度。

font: 14px/20px 的效果

此属性将有效地设置以下值：

font-size: 14px;
line-height: 20px;

这意味着文本的字体大小为 14px，而相邻行之间的垂直间距为 20px。这比默认行高（通常为字体大小的 1.2 倍）略大，因此会增加文本之间的空间。

实际应用

在您提到的示例中，您为中间的 div 设置了 40px 的字体大小，导致文字重叠，div 的高度不会随着字体大小的增加而增加。这是因为此 div 继承了将行高设置为 20px 的 font 属性。

要解决这个问题，您可以指定一个更高的行高值，从而增加文本行之间的空间。或者，您还可以通过明确设置 line-height 属性来覆盖继承的样式。

以上就是CSS 中 font: 14px/20px 属性到底在做什么？的详细内容，更多请关注其它相关文章！