使用CSS自定义属性在深色模式下调整可变字体粗细

Black并不总是瘦身的。最近在我的一个网站上测试暗模式选项时，我亲身体验了Robin Rendle在本文中提到的问题。当我切换到黑暗模式时，我所有的页面文本——标题和正文——似乎都变大了。不管我用什么字体，也不管我用什么浏览器。同样的事情也发生在他们身上。例如，在Chrome For Windows中，Adobe的Sans Pro源代码是这样的：切换到暗模式时看到那些模糊的边缘了吗？这不是幻觉。在黑暗的背景下，浅色的角色真的很重。我们可以放大看得更清楚：黑暗模式下的字符确实更厚！当我们反转那些图像的暗模式部分时，它变得非常明显：当我们把字符并排放在同一个白色背景上时，我们真的可以看到区别解决方案由于可变字体受到广泛的浏览器支持，我们可以使用它们来帮助我们解决这个问题。下面的三个面板展示了我们将要解决的问题：顶部显示了一些深色背景上的浅色文本。中间的面板显示在暗模式下发生的情况，而不更改任何字体权重设置。下面的面板展示了我们已经缩小了一点的暗模式文本。第三个面板被调整以匹配其对应的亮模式文本的重量，这就是我们在这里尝试实现的目标。下面是我们如何获得这种改进效果的：通过以下方法之一减少暗模式下的font-weight属性：以下方法： 1. 在暗模式媒体查询中直接手动更改每个font-weight赋值。 2. 创建一个--font-weight-multiplier自定义属性，在暗模式下更改其值，然后我们可以用该属性乘以每个元素的默认font-weight值。 3. 同样的方法，但是，我们没有单独计算每个元素的sfont-weight属性，而是利用CSS变量作用域和通用选择器（**5***）一次将乘数计算应用到所有地方。 4. 调整变量字体的s grade（\"GRAD\"）轴。并非所有变量字体都支持此特定功能，但Roboto Flex确实如此。更改此轴值会改变字体的表观重量，而不会影响字母的宽度。调整可变字体的暗模式（\"DRKM\"）轴。Dalton Maag的暗模式（以暗模式轴命名）非常适合这种情况。与Roboto Flex的s-grade轴一样，调整Darkmode的s-Darkmode轴会改变字体的表观重量。但是，虽然坡度轴需要对值进行一些微调，但深色模式轴只需打开（较薄）或关闭（常规）。第一组中的技术适用于大多数可变字体。Robin在文章中使用的解决方案实际上是组中的第一项。我将通过引入自定义属性来扩展组中的第二和第三项，这些属性帮助我们在暗模式下自动调整字体权重。第二和第三组涉及不太常见的font-variation-settings轴。虽然这些策略只适用于较少的字体，但在可用时可能更可取。诀窍是在选择变量字体之前先知道它支持什么。我做了一个演示页面，包括本文中介绍的所有策略。您可以看到一些不同的可变字体在浅色模式、无需调整的深色模式和我们的字符细化解决方案的深色模式下的外观。查看演示除了上面列出的策略之外，还有一个选项：不要做任何事情！如果您认为字体在明暗模式下看起来足够好，或者您现在没有足够的带宽来处理回流、元素大小调整、浏览器/显示不一致以及需要维护额外的CSS，那么您可能不需要更改任何内容。把注意力放在网站的其他部分，让自己有机会稍后再讨论这个话题。策略1：减少font-weight值大多数可变文本字体都有一个权重轴，允许我们在该字体可用的权重范围内（例如0-1000、300-800等）指定任何特定的font-weight值。此策略中的每种技术都利用对权重轴的精细控制，在暗模式下减少font-weight值。（这种font-weight精度的需要也是大多数非可变字体不适合这种解决方案的原因。）如果您使用的是本地的可变字体，您可以检查它们的轴和 5. 6. 调整变量字体的s grade（\"GRAD\"）轴。并非所有变量字体都支持此特定功能，但Roboto Flex确实如此。更改此轴值会改变字体的表观重量，而不会影响字母的宽度。 7. 调整可变字体的暗模式（\"DRKM\"）轴。Dalton Maag的暗模式（以暗模式轴命名）非常适合这种情况。与Roboto Flex的s-grade轴一样，调整Darkmode的s-Darkmode轴会改变字体的表观重量。但是，虽然坡度轴需要对值进行一些微调，但深色模式轴只需打开（较薄）或关闭（常规）。

使用CSS自定义属性在深色模式下调整可变字体粗细

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么