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

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

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

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

我們?cè)撊绾谓鉀Q這個(gè)問(wèn)題呢？

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

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

以下是使用這個(gè)新示例的效果：

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

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

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

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

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

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

同樣，這是一個(gè)細(xì)微的變化，但它很重要，因?yàn)樵谶@些尺寸下，我們所做的每一次排版改進(jìn)都有助於閱讀體驗(yàn)。

還有一個(gè)小小的Google Fonts 提示！

Google Fonts 允許您通過(guò)在文檔的部分添加<code><link>標(biāo)籤來(lái)將字體添加到您的網(wǎng)站，如下所示：

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

這使用了Rosario 字體並添加了515 的字體粗細(xì)——這是上面代碼中wght@515部分。即使這恰好是一個(gè)可變字體，也只會(huì)下載此字體粗細(xì)。但是，如果我們嘗試這樣做……

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

……什麼也不會(huì)發(fā)生！事實(shí)上，字體根本不會(huì)加載。相反，我們需要聲明我們想要的字體粗細(xì)值範(fàn)圍，方法如下：

 <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 之間所有粗細(xì)的字體文件。或者，在每個(gè)粗細(xì)之間添加分號(hào)，則只會(huì)下載300 和500 粗細(xì)——因此，例如，您無(wú)法選擇301 粗細(xì)：

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

我花了幾分鐘才弄清楚哪裡出了問(wèn)題以及為什麼字體根本沒(méi)有加載，所以希望Google Fonts 團(tuán)隊(duì)將來(lái)能夠使嵌入代碼更清晰一些。也許應(yīng)該在某個(gè)地方添加一個(gè)選項(xiàng)或切換開關(guān)來(lái)選擇範(fàn)圍或特定粗細(xì)（或者也許我只是沒(méi)有看到它）。

無(wú)論如何，我認(rèn)為這就是可變字體如此有用的原因；它們?cè)试S我們以以前從未能夠做到過(guò)的方式調(diào)整文本。所以，可變字體萬(wàn)歲！

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