使用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中文網其他相關文章！