CSSカスタムプロパティを使用して、ダークモードで可変フォントの重みを調整する

テキストの読みやすさへのダークモードの影響：可変フォントを使用したCSSソリューション

ダークモードは、審美的に心地よいものの、多くの場合、挑戦を提示します。テキストは暗い背景に対して重く見えることがあります。この記事では、CSSカスタムプロパティと可変フォントを使用して、この問題に対処し、明るいモードと暗いモード間で一貫したテキストの外観を確保するソリューションについて説明します。

問題は幻想ではありません。明るいキャラクターは、暗い背景で本当に大胆に見えます。これは、明るいモードとダークモードのテキストを比較するときに簡単に観察でき、色を反転するとさらに明確になります。

可変フォントを使用したソリューション

可変フォントは強力なソリューションを提供します。理想的な効果には、文字幅を変更することなく、暗いモードで微妙に薄くなるテキストが含まれます。いくつかの戦略を通じてこれを達成できます。

1. font-weight手動で調整する：これには、ダークモードのメディアクエリ内でfont-weight値を直接変更することが含まれます。機能的ですが、多くの要素で面倒になります。

2. font-weight Multiplier：よりエレガントなアプローチでは、CSSカスタムプロパティ（ --font-weight-multiplier ）を使用して重量調整を制御します。この乗数は、各要素のデフォルトのデフォルトfont-weightダークモードで変更します。たとえば、 --font-weight-multiplierに0.85に設定すると、重量が15％減少します。

3. ユニバーサルセレクターと乗数：この高度な手法は、CSS変数スコープとユニバーサルセレクター（ * ）を活用して、乗数計算をグローバルに適用します。これにより、CSSが簡素化されますが、特定の要素に対する意図しない影響を避けるために慎重に検討する必要があります。

4. font-variation-settingsと軸の操作：一部の可変フォントは、文字幅に影響を与えることなく見かけの重みを直接制御する「グレード」（グレード」や「DRKM」（ダークモード）などの軸を提供します。 Roboto Flexは「GRAD」を利用し、Dalton MaagのDarkModeフォントは「DRKM」軸を備えています。

戦略1： font-weight操作

最も単純な方法は、ダークモードメディアクエリの各要素のfont-weight手動で調整することです。ただし、要素の数が増えるにつれて、これは管理の方が少なくなります。

 / *デフォルト（ライトモード）CSS */
ボディ{font-weight：400; }
strong {font-weight：700; }

/ *ダークモードCSS */
@media（より好ましい -  color-scheme：dark）{
  ボディ{font-weight：350; }
  strong {font-weight：600; }
}

戦略2：カスタムプロパティを備えたfont-weight乗数

カスタムプロパティを使用する（ --font-weight-multiplier ）は、より保守可能なソリューションを提供します。

 / *ダークモード固有のカスタムプロパティ */
@media（より好ましい -  color-scheme：dark）{
  ：root { -  font-weight-multiplier：.85; }
}

/ *デフォルトのCSSスタイル... */
body {font-weight：calc（400 * var（ -  font-weight-multiplier、1））; }
strong {font-weight：calc（700 * var（ -  font-weight-multiplier、1））; }

戦略3：ユニバーサルセレクターと乗数

このアプローチは、すべての要素に一度に乗数を適用します。

 / *デフォルトのカスタムプロパティ */
：root { -  font-weight：400; - -font-weight-multiplier：1; }
strong { -  font-weight：700; }

/ *ダークモード固有のカスタムプロパティ */
@media（より好ましい -  color-scheme：dark）{
  ：root { -  font-weight-multiplier：.85; }
}

/ *カスタムプロパティの適用... */
* {font-weight：calc（var（ -  font-weight、400） * var（ -  font-weight-multiplier、1））; }

戦略4： font-variation-settingsによる軸操作

「グレード」または「DRKM」軸を備えたフォントは、体重を直接制御します。

 / * roboto flex（ "grad" axis）の場合 */
：root {--grad：0; }
@media（creters-color-scheme：dark）{：root { -  grad：-.75; }}
body {font-variation-settings： "grad" var（ -  grad、0）; }

追加の考慮事項

• 高解像度スクリーン：効果は網膜ディスプレイではあまり顕著ではありません。それに応じて乗数を調整します。
• 混合フォント：異なる軸または非変動フォントを持つフォントへの影響を慎重に検討します。
• 文字間隔：フォントウェイトを下げると、文字が狭くなります。必要に応じてレター間隔を調整します。

これらの手法を活用することにより、開発者は明るいモードと暗いモードで一貫した読みやすいテキストを確保し、全体的なユーザーエクスペリエンスを向上させることができます。これらの戦略を紹介するデモが利用可能です[デモへのリンク]。

以上がCSSカスタムプロパティを使用して、ダークモードで可変フォントの重みを調整するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。