暗模式對(duì)文本可讀性的影響：使用可變字體的CSS解決方案

黑暗模式雖然美學(xué)上令人愉悅，但通常會(huì)帶來(lái)一個(gè)挑戰(zhàn)：在黑暗的背景下，文本看起來(lái)更重。本文使用CSS自定義屬性和可變字體探討解決方案來(lái)解決此問(wèn)題，從而確?？绻夂秃诎的Ｊ降奈谋就庥^一致。

問(wèn)題不是幻想。較輕的角色在深色背景上確實(shí)看起來(lái)更大膽。當(dāng)比較光和暗模式文本時(shí)，這很容易觀察到，并且在倒轉(zhuǎn)顏色時(shí)變得更加清晰。

使用可變字體的解決方案

可變字體提供了強(qiáng)大的解決方案。理想的效果涉及在黑暗模式下巧妙地變薄的文本，而不會(huì)改變字符寬度。我們可以通過(guò)幾種策略來(lái)實(shí)現(xiàn)這一目標(biāo)：

1. 手動(dòng)調(diào)整font-weight ：這涉及在黑模式媒體查詢中直接修改font-weight值。功能性雖然具有許多元素，但它變得繁瑣。

2. font-weight乘數(shù)：一種更優(yōu)雅的方法使用CSS自定義屬性（ --font-weight-multiplier ）來(lái)控制重量調(diào)整。此乘數(shù)在暗模式下修改了每個(gè)元素的默認(rèn)font-weight 。例如，設(shè)置--font-weight-multiplier為0.85可將重量降低15％。

3. 通用選擇器和乘數(shù)：此高級(jí)技術(shù)利用CSS變量范圍和通用選擇器（ * ）在全球應(yīng)用乘數(shù)計(jì)算。這簡(jiǎn)化了CSS，但需要仔細(xì)考慮以避免對(duì)特定元素的意外影響。

4. font-variation-settings和軸操縱：某些可變字體提供諸如“ grad”（級(jí)）或“ drkm”（暗模式）之類的軸，它們直接控制明顯的重量而不會(huì)影響字符寬度。 Roboto Flex利用“ Grad”，而Dalton Maag的Darkmode字體具有“ Drkm”軸。

策略1： font-weight操縱

最簡(jiǎn)單的方法是在暗模式媒體查詢中手動(dòng)調(diào)整每個(gè)元素的font-weight 。但是，隨著元素?cái)?shù)量的增加，這將變得易于管理。

 / *默認(rèn)（燈模式）CSS */
身體{字體權(quán)重：400; }
強(qiáng){字體重量：700; }

/ *黑模式CSS */
@Media（prefers-color-scheme：dark）{
  身體{字體權(quán)重：350; }
  強(qiáng){字體重量：600; }
}

策略2：具有自定義屬性的font-weight乘數(shù)

使用自定義屬性（ --font-weight-multiplier ）提供了更可維護(hù)的解決方案。

 / *暗模式特定的自定義屬性 */
@Media（prefers-color-scheme：dark）{
  ：root { -  -font-weight-Multiplier：.85; }
}

/ *默認(rèn)的CSS樣式... */
Body {font-jight：calc（400 * var（ -  font-weight-multiplier，1））; }
strong {font-jight：calc（700 * var（ -  font-weight-multiplier，1））; }

策略3：通用選擇器和乘數(shù)

這種方法一次將乘數(shù)應(yīng)用于所有元素。

 / *默認(rèn)自定義屬性 */
：root { -  -font-jight：400; - 聯(lián)合體重 - 武力：1; }
強(qiáng){ -   - 五大：700; }

/ *暗模式特定的自定義屬性 */
@Media（prefers-color-scheme：dark）{
  ：root { -  -font-weight-Multiplier：.85; }
}

/ *應(yīng)用自定義屬性... */
* {font-權(quán)重：calc（var（ -  font-pronger，400） * var（ -  font-weight-multiplier，1））; }

策略4：用font-variation-settings軸操縱

具有“畢業(yè)”或“ DRKM”軸的字體可直接控制重量。

 / *對(duì)于Roboto Flex（“畢業(yè)”軸） */
：root {-grad：0; }
@Media（prefers-color-scheme：dark）{：root { -  grad：-.75; }}}
身體{font-variation-settings：“ grad” var（ -  grad，0）; }

其他考慮因素

• 高分辨率屏幕：對(duì)視網(wǎng)膜顯示器的效果不太明顯。相應(yīng)地調(diào)整乘數(shù)。
• 混合字體：仔細(xì)考慮對(duì)具有不同軸或不可變化字體的字體的影響。
• 信件間隔：降低字體重量可以縮小字符。根據(jù)需要調(diào)整字母間隔。

通過(guò)利用這些技術(shù)，開發(fā)人員可以確?？绻夂蜕钌Ｊ降囊恢虑仪逦奈谋荆瑥亩鰪?qiáng)整體用戶體驗(yàn)。可以提供展示這些策略的演示[鏈接到演示]。

以上是使用CSS自定義屬性在黑模式下調(diào)整可變字體權(quán)重的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！