通过CSS字体尺寸调整，改进网络版式

CSS font-size-adjust 属性：提升网页排版可读性的利器

font-size-adjust CSS 属性允许开发者根据小写字母的高度而非大写字母的高度来指定字体大小，从而显着提升网页文本的可读性，尤其在使用备用字体时效果显着。

本文将深入探讨 font-size-adjust 属性的重要性及其在项目中的正确使用方法。

font-size-adjust 的重要性

大多数网站主要由文本构成。由于文字在网站中至关重要，因此特别关注所使用的字体就显得尤为必要。选择合适的字体能带来愉悦的阅读体验，反之则可能导致网站难以阅读。确定字体后，通常需要选择合适的字体大小。

font-size 属性设置网站上所有字体系列的字体大小。然而，它通常是针对首选字体系列进行选择的。当首选字体由于某种原因不可用时，浏览器会使用 CSS 文档中列出的备用字体之一来呈现文本，问题就出现了。

例如，给定以下 CSS 规则：

<code class="language-css">body {
  font-family: 'Lato', Verdana, sans-serif;
}</code>

如果浏览器无法从 Google Fonts 下载“Lato”，则会改用下一个备用字体 Verdana。然而，font-size 值很可能是在考虑“Lato”的情况下选择的，而不是 Verdana。

网页字体的纵横比

对于恒定的字体大小值，字体的视觉大小及其可读性可能差异很大。对于区分大小写字母的拉丁文等文字尤其如此。在这种情况下，小写字母高度与其大写字母高度的比率是决定字体可读性的重要因素。此比率通常称为字体的纵横比。

如前所述，一旦设置了 font-size 值，它将对所有字体系列保持不变。但是，如果备用字体的纵横比与首选字体的纵横比差异过大，则可能会影响备用字体的可读性。

font-size-adjust 属性在这种情况下就显得非常重要，因为它允许您将所有字体的 x 高度设置为相同的值，从而提高其可读性。

选择合适的 font-size-adjust 值

现在您已经了解了使用 font-size-adjust 属性的重要性，接下来学习如何在您的网站上使用它。此属性具有以下语法：

<code class="language-css">font-size-adjust: none | <number></number></code>

font-size-adjust 的初始值为 none。 none 值表示不会调整不同字体系列的 font-size 值。

您还可以将 font-size-adjust 属性的值设置为一个数字。此数字用于将网页上所有字体的 x 高度计算为相同的值。x 高度等于给定数字乘以字体大小。这可以相当大地提高小尺寸字体的可读性。以下是如何使用 font-size-adjust 属性的示例：

<code class="language-css">body {
  font-family: 'Lato', Verdana, sans-serif;
}</code>

现在所有字体的 x 高度都将为 20px * 0.6 = 12px。现在可以更改给定字体的实际大小，以确保 x 高度始终保持在 12px。可以使用以下公式计算给定字体的新的调整后的字体大小：

c = (a / a') s。

这里，c 是要使用的调整后的字体大小，s 是指定的字体大小值，a 是 font-size-adjust 属性指定的纵横比，a' 是需要调整的字体的纵横比。

您不能将 font-size-adjust 设置为负值。值为 0 将导致文本没有高度，换句话说，文本实际上会被隐藏。在较旧的浏览器（如 Firefox 40）中，值为 0 等效于将 font-size-adjust 设置为 none。

在大多数情况下，开发人员通常会尝试几个字体大小值，以查看哪个值最适合给定的字体。这意味着理想情况下，他们希望所有字体选项的 x 高度等于其首选字体的 x 高度。换句话说，font-size-adjust 属性最合适的值是首选字体的纵横比。

如何确定字体的纵横比

要确定字体的正确纵横比，您可以依赖这样一个事实：其调整后的字体大小应与您指定的原始字体大小相同。这意味着在前面的等式中，a 应该等于 a'。

计算纵横比的第一步是创建两个元素。这两个元素都将包含单个字母及其周围的边框（这两个字母必须相同，因为我们需要在这两个元素之间进行比较）。此外，这两个元素的 font-size 属性值都相同，但其中只有一个元素也将使用 font-size-adjust 属性。当 font-size-adjust 的值等于给定字体的纵横比时，每个元素中的两个字母的大小都将相同。

在网站上使用 font-size-adjust

浏览器支持：目前，只有 Firefox 默认支持 font-size-adjust。从 43 版和 30 版开始，Chrome 和 Opera 在“实验性 Web 平台功能”标志（可在 chrome://flags 中启用）之后支持此属性。Edge 和 Safari 完全不支持 font-size-adjust 属性。

如果您决定使用此属性，较低的浏览器支持根本不应该成为问题。此属性的设计考虑了向后兼容性。不支持此属性的浏览器将正常显示文本，而支持此属性的浏览器将根据 font-size-adjust 属性的值调整字体大小。

结论

阅读完本教程后，您现在知道了 font-size-adjust 属性的作用、其重要性以及如何计算不同字体的纵横比。

由于 font-size-adjust 在旧版浏览器中可以优雅地降级，因此您可以立即开始使用它来提高生产网站中文本的可读性。

(文章末尾的图片与文章开头相同)

以上是通过CSS字体尺寸调整，改进网络版式的详细内容。更多信息请关注PHP中文网其他相关文章！