font: 110%/1.4 system-ui 的含义是什么？

我在许多快速演示中使用了这行代码，或者类似的代码。这并不是说它不是生产就绪的代码行——我只是倾向于在大型项目中更明确一些。

html {
  font: 110%/1.4 system-ui;
}

有人写信表示对此感到困惑，我可以看到像这样的代码行一开始会让人感到困惑。

首先要知道的是，这被称为**简写**。CSS 中的 font 属性允许您一次设置许多 font-* 属性。在本例中，我们设置了

html {
  font-family: system-ui;
  font-size: 110%;
  line-height: 1.4;
}

还有几个需要注意的小细节。例如，顺序很重要。

/* invalid */
html {
  font: system-ui 100%/1.4;
}

您也不能在不设置 font-size 的情况下设置 line-height。如果您要设置 line-height，则必须同时设置两者。在这里要格外小心，因为诸如 20px 之类的值既可以是有效的 line-height，也可以是 font-size，如果您只设置了一个，它将是 font-size。如果您使用无单位数字（对于 line-height 来说是一个好主意），并尝试单独设置它，它将失败。

/* invalid */
html {
  font: 1.5 system-ui;
}

当然，我们在font 的年鉴条目中详细介绍了所有这些内容。但我也要感谢 Mateusz Hadryś，他撰写了一篇题为“使用一行 CSS 进行完整文本样式设置”的详细文章，其中包含一些像这样的详细图表，有助于理解所有内容

最后，如果 system-ui 是困惑的一部分，那么它就是那些系统事物之一。