使用CSS自定义属性在黑模式下调整可变字体权重

暗模式对文本可读性的影响：使用可变字体的CSS解决方案

黑暗模式虽然美学上令人愉悦，但通常会带来一个挑战：在黑暗的背景下，文本看起来更重。本文使用CSS自定义属性和可变字体探讨解决方案来解决此问题，从而确保跨光和黑暗模式的文本外观一致。

问题不是幻想。较轻的角色在深色背景上确实看起来更大胆。当比较光和暗模式文本时，这很容易观察到，并且在倒转颜色时变得更加清晰。

使用可变字体的解决方案

可变字体提供了强大的解决方案。理想的效果涉及在黑暗模式下巧妙地变薄的文本，而不会改变字符宽度。我们可以通过几种策略来实现这一目标：

1. 手动调整font-weight ：这涉及在黑模式媒体查询中直接修改font-weight值。功能性虽然具有许多元素，但它变得繁琐。

2. font-weight乘数：一种更优雅的方法使用CSS自定义属性（ --font-weight-multiplier ）来控制重量调整。此乘数在暗模式下修改了每个元素的默认font-weight 。例如，设置--font-weight-multiplier为0.85可将重量降低15％。

3. 通用选择器和乘数：此高级技术利用CSS变量范围和通用选择器（ * ）在全球应用乘数计算。这简化了CSS，但需要仔细考虑以避免对特定元素的意外影响。

4. font-variation-settings和轴操纵：某些可变字体提供诸如“ grad”（级）或“ drkm”（暗模式）之类的轴，它们直接控制明显的重量而不会影响字符宽度。 Roboto Flex利用“ Grad”，而Dalton Maag的Darkmode字体具有“ Drkm”轴。

策略1： font-weight操纵

最简单的方法是在暗模式媒体查询中手动调整每个元素的font-weight 。但是，随着元素数量的增加，这将变得易于管理。

 / *默认（灯模式）CSS */
身体{字体权重：400; }
强{字体重量：700; }

/ *黑模式CSS */
@Media（prefers-color-scheme：dark）{
  身体{字体权重：350; }
  强{字体重量：600; }
}

策略2：具有自定义属性的font-weight乘数

使用自定义属性（ --font-weight-multiplier ）提供了更可维护的解决方案。

 / *暗模式特定的自定义属性 */
@Media（prefers-color-scheme：dark）{
  ：root { -  -font-weight-Multiplier：.85; }
}

/ *默认的CSS样式... */
Body {font-jight：calc（400 * var（ -  font-weight-multiplier，1））; }
strong {font-jight：calc（700 * var（ -  font-weight-multiplier，1））; }

策略3：通用选择器和乘数

这种方法一次将乘数应用于所有元素。

 / *默认自定义属性 */
：root { -  -font-jight：400; - 联合体重 - 武力：1; }
强{ -   - 五大：700; }

/ *暗模式特定的自定义属性 */
@Media（prefers-color-scheme：dark）{
  ：root { -  -font-weight-Multiplier：.85; }
}

/ *应用自定义属性... */
* {font-权重：calc（var（ -  font-pronger，400） * var（ -  font-weight-multiplier，1））; }

策略4：用font-variation-settings轴操纵

具有“毕业”或“ DRKM”轴的字体可直接控制重量。

 / *对于Roboto Flex（“毕业”轴） */
：root {-grad：0; }
@Media（prefers-color-scheme：dark）{：root { -  grad：-.75; }}}
身体{font-variation-settings：“ grad” var（ -  grad，0）; }

其他考虑因素

• 高分辨率屏幕：对视网膜显示器的效果不太明显。相应地调整乘数。
• 混合字体：仔细考虑对具有不同轴或不可变化字体的字体的影响。
• 信件间隔：降低字体重量可以缩小字符。根据需要调整字母间隔。

通过利用这些技术，开发人员可以确保跨光和深色模式的一致且清晰的文本，从而增强整体用户体验。可以提供展示这些策略的演示[链接到演示]。

以上是使用CSS自定义属性在黑模式下调整可变字体权重的详细内容。更多信息请关注PHP中文网其他相关文章！