不久前，我们写了关于 CSS 中的深色模式，我一直思考白底黑字比黑底白字更难阅读。 想了很久，我意识到我们可以通过使用可变字体在深色模式下将文本变细来解决这个问题！
这是一个示例，我使用的是 Yanone Kaffeesatz（来自 Google Fonts）。 请注意，白底黑字部分比黑底白字部分看起来更重。
奇怪的是，这两段文本实际上使用的是相同的 font-weight 值 400。 但在我看来，白底黑字看起来格外粗。
仔细观察这个例子。 这只是白底黑字在更暗背景下的显示方式； 这是我们眼睛感知形状和颜色的方式。 在某些情况下，这可能不是大问题，但阅读暗背景上的浅色文本对读者来说总是更困难。 而且，如果我们在深色模式上下文中不注意文本设计，那么在阅读时会感觉文本在振动。
我们如何解决这个问题呢？
好吧，这就是可变字体发挥作用的地方！ 我们可以使用更轻的字体粗细，以便在深色模式激活时更易于阅读文本
body {
font-weight: 400;
}
@media (prefers-color-scheme: dark) {
body {
font-weight: 350;
}
}以下是这个新示例的外观
这更好！ 现在这两个变体在我看来更平衡了。
同样，这只是一个很小的差异，但所有伟大的设计都包含这样的微调。 我认为，如果您已经在使用可变字体并加载所有这些字体粗细，那么您绝对应该调整文本，使其更容易阅读。
如果我们比较更长的文本段落之间的差异，这种效果更容易发现。 现在，这次在 Literata 中
请注意，右侧的文本感觉更粗，但事实并非如此。 这只是一个视觉错觉——上面两个示例的字体粗细都是 500。
因此，为了解决这个问题，我们可以像上面示例中那样操作
body {
font-weight: 500;
}
@media (prefers-color-scheme: dark) {
body {
font-weight: 400;
}
}同样，这只是一个细微的变化，但它很重要，因为在这些尺寸下，我们进行的每一项印刷改进都有助于阅读体验。
还有，这里有一个关于 Google 字体的快速提示！
Google Fonts 允许您通过在文档的 <head> 中添加一个 <link> 来将字体添加到您的网站，如下所示
<head>
<link href="https://fonts.googleapis.com/css2?family=Rosario:wght@515&display=swap" rel="stylesheet">
</head>这使用的是 Rosario 字体，并添加了 515 的字体粗细——这正是上面代码中说 wght@515 的部分。 即使这恰好是一个可变字体，也只会下载这种字体粗细。 但是，如果我们尝试执行类似的操作……
body {
font-weight: 400;
}……将不会发生任何事情！ 事实上，字体根本不会加载。 相反，我们需要通过执行以下操作来声明我们想要加载的字体粗细值的范围
<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:[email protected]&display=swap" rel="stylesheet">上面代码中的 @300..500 部分告诉 Google Fonts 下载具有 300 到 500 之间所有字体粗细的字体文件。 或者，在每个字体粗细之间添加一个 ; 然后只会下载 300 和 500 字体粗细——因此，例如，您无法选择 301 字体粗细。
<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@300;500&display=swap" rel="stylesheet">我花了几分钟才弄明白出了什么问题以及为什么字体根本没有加载，因此希望 Google Fonts 团队将来可以更清楚地说明嵌入代码。 也许应该在某个地方有一个选项或一个切换按钮来选择范围或特定字体粗细（或者也许我只是没有看到它）。
无论如何，我认为这就是可变字体非常有用的原因； 它们允许我们以以前从未有过的方式调整文本。 所以，为可变字体欢呼！
为了使可变字体真正可用（尤其是对于“深色模式”这样的东西），它们应该支持等宽：无论字体粗细等如何，给定字符都具有相同的固定宽度（占用相同的空间）。 否则文本会重新换行。
https://www.fontshop.com/people/david-sudweeks/fontlists/uniwidth-typefaces
这个错误只针对可变字体，对吧？ 抗锯齿不起作用吗？
我认为这是微不足道的。 深色模式不是为不断切换而设计的，因此文本理想情况下只重新换行一次。 这并不常发生，不足以拒绝不支持等宽设置的字体。
一些可变字体具有渐变 (GRAD) 轴； 您可以在为深色模式编码时降低渐变，而不会有文本重新换行的风险。 例如，Google 指出 macOS Catalina 中的 Apple 系统字体 San Francisco 支持 GRAD 轴。
如何从浅色模式更改为深色模式？
您可以将操作系统的主题设置更改为使用深色主题（在 Windows 10、macOS 和 Linux 上）。 如果您使用的是 Firefox，您还可以安装 Dark Website Forcer 附加组件： https://addons.mozilla.org/en-US/firefox/addon/dark-mode-website-switcher/
确实看起来更容易阅读。 谢谢你的建议。
我认为可变字体是一个包含所有字体粗细的文件（假设可自定义字体粗细是字体支持的功能），那么为什么 Google Fonts 只能加载一些字体粗细呢？
Google Fonts 正在使用查询参数引入新的语法。 当为轴（本文示例中的 wght）定义一个范围时，就会返回一个可变字体。 否则，将为每个单独的字体粗细返回一个静态字体。 本文 提供了更多说明。
奇怪的是，“She walked…” 的 350 粗细深色模式版本比 400 粗细正常模式版本更宽，即使深色模式版本更细，在以“以下是这个新示例的外观”为前缀的 codepen 中也是如此。 我正在 Mac 上使用最新版 Chrome。
在字体设计中，您尝试获得均匀的“颜色”（感知密度）。 因为在更细的字体中，字母内部有更多空间，所以您通常会在字母之间添加一些空间。 因此，更细的字体可能比更粗的字体更宽，因为后者可以间距更紧密一些。 这并不总是如此，但当字体设计师不希望粗体字母太宽，细体字母太窄时，这种情况经常发生。
这完全是由于 macOS 子像素抗锯齿。 将
-webkit-font-smoothing: antialiased应用于上面所有示例可以完全解决问题。 这不是“只是我们眼睛感知形状和颜色的方式”，这是我们所有使用的计算机的具体产物。 您会发现有文章告诉您不要修改-webkit-font-smoothing，但它们都错了。此外，上面后面的示例作弊，在浅色模式示例中将 #222 文本放在 #fff 上，在深色模式示例中将 #fff 文本放在 #111 上。 太丢脸了！
好吧，我知道当我写“100%”的时候，这是夸张的说法。 但我没有想到的是，当我修复了颜色、关闭了子像素抗锯齿，并在 Photoshop 中切换示例的屏幕截图时，我被说服了，第二个正文文本示例确实明显更优。 对我冒失的讽刺表示歉意。 我确实认为 Mac 的默认抗锯齿大大加剧了这个问题，而且应该无条件地禁用它。 而且当试图说明这一点时，颜色应该具有可比性。
请注意，Lanny：在印刷术中，众所周知，暗背景上的发光字母往往看起来更粗。 不幸的是，我只知道这个术语的德语——“Überstrahlung”，可以翻译为“泛光”或“耀斑”。 如果有人知道英文术语，请评论！
我在一篇关于 计算机屏幕可读性 的德语文章中找到了对这种现象的很好的解释。 我对相关部分的翻译是：“明亮区域会比暗淡区域更显眼（泛光/耀斑），因此明亮的背景会从外部吞噬黑暗的字母，字体看起来不那么粗——反之，明亮的文本在暗背景上看起来更粗。”
除了电脑屏幕，这种效果也出现在发光或反光的道路标识上（这里没有 macOS 子像素 ☺）。出于这个原因，专门的字体甚至为反转环境提供了一个稍微细一点的版本，例如 Wayfinding Sans，参见 https://fdi-type.de/faq/font-usage/what-are-the-positive-and-negative-styles-of-wayfinding-sans-pro-for-r2/
-webkit-font-smoothing: antialiased有助于对抗这种 Überstrahlung，根据 https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/，降低整体对比度也有帮助。在黑色背景上稍微 (!) 间隔白色文字也很有帮助。正如印刷术中总是存在多种可能性一样，也有多种方法可以补偿众多细微的光学现象。
我 ♥️ “Überstrahlung” 这个词！