黑暗模式和可變字體

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

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

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

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

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

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

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

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

好多了！在我看來，這兩個變體現在看起來平衡多了。

同樣，這只是一個很小的差異，但所有偉大的設計都包含這樣的微調。我認為，如果您已經在使用可變字體並加載所有這些粗細，那麼您絕對應該調整文本，使其更易於閱讀。

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

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

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

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

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

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

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

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

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

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

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

以上是黑暗模式和可變字體的詳細內容。更多資訊請關注PHP中文網其他相關文章！