黑暗模式和可变字体

之前我们讨论过 CSS 中的暗模式，我一直思考一个问题：白色文本在黑色背景上的可读性通常不如黑色文本在白色背景上。经过一番思考，我意识到我们可以利用可变字体在暗模式下减轻文本粗细来解决这个问题！

以下示例展示了这个问题，我使用了 Google Fonts 中的 Yanone Kaffeesatz 字体。注意，白色文本在黑色背景上的部分看起来比黑色文本在白色背景上的部分更粗。

奇怪的是，这两段文本实际上使用了相同的字体粗细值 400。但在我看来，白色文本在黑色背景上显得格外粗黑。

仔细观察这个例子。这就是白色文本在较暗背景上的显示效果；这是我们眼睛感知形状和颜色的方式。在某些情况下，这可能不是什么大问题，但阅读深色背景上的浅色文本总是更困难。如果我们在设计暗模式文本时不注意，阅读时可能会感觉文本在振动。

我们该如何解决这个问题呢？

这就是可变字体发挥作用的地方！我们可以使用更轻的字体粗细，在启用暗模式时使文本更易于阅读：

<code>body {
  font-weight: 400;
}

@media (prefers-color-scheme: dark) {
  body {
    font-weight: 350;
  }
}</code>

以下是使用这个新示例的效果：

好多了！在我看来，这两个变体现在看起来平衡多了。

同样，这只是一个很小的差异，但所有伟大的设计都包含这样的微调。我认为，如果您已经在使用可变字体并加载所有这些粗细，那么您绝对应该调整文本，使其更易于阅读。

如果我们比较较长文本段之间的差异，这种效果更容易发现。这次我们使用 Literata 字体：

注意，右侧的文本 感觉 更粗，但事实并非如此。这仅仅是一种视觉错觉——上面两个示例的字体粗细都是 500。

因此，为了解决这个问题，我们可以像上面的示例一样：

<code>body {
  font-weight: 500;
}

@media (prefers-color-scheme: dark) {
  body {
    font-weight: 400;
  }
}</code>

同样，这是一个细微的变化，但它很重要，因为在这些尺寸下，我们所做的每一次排版改进都有助于阅读体验。

还有一个小小的 Google Fonts 提示！

Google Fonts 允许您通过在文档的 部分添加 <link> 标签来将字体添加到您的网站，如下所示：

<code><link href="https://fonts.googleapis.com/css2?family=Rosario:wght@515&display=swap" rel="stylesheet"></code>

这使用了 Rosario 字体并添加了 515 的字体粗细——这是上面代码中 wght@515 部分。即使这恰好是一个可变字体，也只会下载此字体粗细。但是，如果我们尝试这样做……

<code>body {
  font-weight: 400;
}</code>

……什么也不会发生！事实上，字体根本不会加载。相反，我们需要声明我们想要的字体粗细值范围，方法如下：

<code><link href="https://fonts.googleapis.com/css2?family=Yanone%20Kaffeesatz:wght@300..500&display=swap" rel="stylesheet"></code>

上面代码中的 @300..500 部分告诉 Google Fonts 下载包含 300 到 500 之间所有粗细的字体文件。或者，在每个粗细之间添加分号，则只会下载 300 和 500 粗细——因此，例如，您无法选择 301 粗细：

<code><link href="https://fonts.googleapis.com/css2?family=Yanone%20Kaffeesatz:wght@300;500&display=swap" rel="stylesheet"></code>

我花了几分钟才弄清楚哪里出了问题以及为什么字体根本没有加载，所以希望 Google Fonts 团队将来能够使嵌入代码更清晰一些。也许应该在某个地方添加一个选项或切换开关来选择范围或特定粗细（或者也许我只是没有看到它）。

无论如何，我认为这就是可变字体如此有用的原因；它们允许我们以以前从未能够做到过的方式调整文本。所以，可变字体万岁！

以上是黑暗模式和可变字体的详细内容。更多信息请关注PHP中文网其他相关文章！