之前我們討論過 CSS 中的暗模式，我一直思考一個問題：白色文本在黑色背景上的可讀性通常不如黑色文本在白色背景上。經(jīng)過一番思考，我意識到我們可以利用可變字體在暗模式下減輕文本粗細來解決這個問題！

以下示例展示了這個問題，我使用了 Google Fonts 中的 Yanone Kaffeesatz 字體。注意，白色文本在黑色背景上的部分看起來比黑色文本在白色背景上的部分更粗。

奇怪的是，這兩段文本實際上使用了相同的字體粗細值 400。但在我看來，白色文本在黑色背景上顯得格外粗黑。

仔細觀察這個例子。這就是白色文本在較暗背景上的顯示效果；這是我們眼睛感知形狀和顏色的方式。在某些情況下，這可能不是什么大問題，但閱讀深色背景上的淺色文本總是更困難。如果我們在設(shè)計暗模式文本時不注意，閱讀時可能會感覺文本在振動。

我們該如何解決這個問題呢？

這就是可變字體發(fā)揮作用的地方！我們可以使用更輕的字體粗細，在啟用暗模式時使文本更易于閱讀：

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

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

以下是使用這個新示例的效果：

好多了！在我看來，這兩個變體現(xiàn)在看起來平衡多了。

同樣，這只是一個很小的差異，但所有偉大的設(shè)計都包含這樣的微調(diào)。我認為，如果您已經(jīng)在使用可變字體并加載所有這些粗細，那么您絕對應(yīng)該調(diào)整文本，使其更易于閱讀。

如果我們比較較長文本段之間的差異，這種效果更容易發(fā)現(xiàn)。這次我們使用 Literata 字體：

注意，右側(cè)的文本 感覺 更粗，但事實并非如此。這僅僅是一種視覺錯覺——上面兩個示例的字體粗細都是 500。

因此，為了解決這個問題，我們可以像上面的示例一樣：

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

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

同樣，這是一個細微的變化，但它很重要，因為在這些尺寸下，我們所做的每一次排版改進都有助于閱讀體驗。

還有一個小小的 Google Fonts 提示！

Google Fonts 允許您通過在文檔的 部分添加 <link> 標簽來將字體添加到您的網(wǎng)站，如下所示：

<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>

……什么也不會發(fā)生！事實上，字體根本不會加載。相反，我們需要聲明我們想要的字體粗細值范圍，方法如下：

<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 團隊將來能夠使嵌入代碼更清晰一些。也許應(yīng)該在某個地方添加一個選項或切換開關(guān)來選擇范圍或特定粗細（或者也許我只是沒有看到它）。

無論如何，我認為這就是可變字體如此有用的原因；它們允許我們以以前從未能夠做到過的方式調(diào)整文本。所以，可變字體萬歲！

以上是黑暗模式和可變字體的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！