Leading-Trim:数字排版的未来

Avatar of Robin Rendle
Robin Rendle

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

leading-trim 是一个建议的新 CSS 属性,它允许我们移除每个字体中的额外间距,以便我们能够更可预测地设置文本样式。Ethan Wang 已经 撰写了关于它的文章——包括微软如何倡导它——以及它现在是 内联布局模块第 3 级 规范的一部分。

您可以像这样使用它

h1 { 
 leading-trim: both;
 text-edge: cap alphabetic;
}

这告诉浏览器查看字体文件,深入 OpenType 度量,并有效地执行 Ethan 在此 gif 中演示的操作

我们为什么要这样做?好吧,它将允许我们在按钮内部正确地设置文本间距,而无需任何奇怪的技巧,并且我们还能够在不同的字体之间设置可预测的间距值。我对这个规范和 CSS 属性感到非常兴奋,因为它为我们提供了另一个控制网络上排版使用的工具——就像 驯服行高 一样。

直接链接 →