CSS中带有斜杠的字体大小是什么意思？

Question

这里的斜杠是什么意思？

font: 100%/120%;

- Alex

---

font-size不接受正斜杆。正确的属性是font。 - BoltClock

这个怎么样？ 背景: "rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box" - stackunderflow

Answer 1

这实际上设置了两个属性，相当于：

font-size: 100%;
line-height: 120%;

根据官方文档的说法：

该属性的语法基于传统的排版速记符号符号，用于设置与字体相关的多个属性。

正如David M在评论中所说，它反映了指定字体大小为“x pt on y pt”以表示字形大小和行高的排版传统。

但是你问题中的示例实际上是错误的，并且将被浏览器忽略：您只能在font shorthand 符号符号中组合这两个属性，并且您必须至少指定字体大小和字体系列。因此，仅写font: 100%/120%;是不够的；但您可以添加通用字体系列名称以使其有效，例如：

font: 100%/120% serif;

- Konrad Rudolph

---

这是为了反映旧的排版语法，其中字体设置为例如“10pt on 12pt”或“10pt/12pt”。 - David M

我实际上经常使用这个。我与之合作的设计师总是将尺寸称为“14 over 22”之类的东西。有一天我不小心输入了它，当它起作用时，我感到惊讶和满意。 - Dylan Lukes

一个小问题：这种格式也不需要指定字体系列吗？我的浏览器正在忽略此属性：font: 12px/16px;但是接受这个：font: 12px/16px sans-serif;这种行为也在这里有记录。 - kumarharsh

@Harsh 是的，正如您在官方定义中所看到的那样，font简写属性最少需要一个（带有大小）的字体族。 - Konrad Rudolph

感谢您的澄清。也许您可以更新答案（或问题），因为一个普通读者可能会认为只有SIZE/LINE_HEIGHT声明才能起作用，这有点误导人。 - kumarharsh

Answer 2

Konrad理解了这一点，但是有很多类似的CSS简写属性可以用来缩短您的样式表。如果您不了解其中一些属性，它们中的一些看起来可能有些神秘。

- Bill the Lizard

---

大多数简写都与样式属性有关，例如border-*。David在评论中对我的回答给出了很好的解释。至于简写是否晦涩难懂：确实如此，但它们非常有用且相当容易学习。 - Konrad Rudolph