以前にCSSでダークモードについて議論しましたが、私は問(wèn)題について考えてきました。白いテキストは通常??、白い背景の黒いテキストよりも黒い背景では読みやすくありません。いくつかの考えの後、私は変數(shù)フォントを使用してダークモードでテキストの重量を減らすことでこの問(wèn)題を解決できることに気付きました！

次の例は、この問(wèn)題を示しています。GoogleFontsのYanone Kaffeesatzフォントを使用しました。黒い背景の白いテキストの部分は、白い背景の黒いテキストの部分よりも厚く見(jiàn)えることに注意してください。

奇妙なことに、これらの2つのテキスト段落は実際に同じフォント重量値400を使用しています。しかし、私の意見(jiàn)では、白いテキストは黒の背景に特に厚くて黒く見(jiàn)えます。

この例を詳しく見(jiàn)てください。これは、白いテキストがより暗い背景にどのように表示されるかです。これは、私たちの目が形と色を知覚する方法です。場(chǎng)合によっては、これは大きな問(wèn)題ではないかもしれませんが、暗い背景で明るいテキストを読むことは常に困難です。ダークモードのテキストを設(shè)計(jì)する際に注意を払わない場(chǎng)合、読むときにテキストが振動(dòng)すると感じるかもしれません。

この問(wèn)題をどのように解決できますか？

これは、可変フォントが作用する場(chǎng)所です！暗いモードが有効になっているときに、より軽いフォントの厚さを使用してテキストを読みやすくすることができます。

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

この新しい例を使用する効果は次のとおりです。

もっと良い！私の意見(jiàn)では、これらの2つのバリアントは今でははるかにバランスが取れているようです。

繰り返しますが、それはわずかな違いですが、すべての優(yōu)れたデザインにはこのような微調(diào)整が含まれます。すでに可変フォントを使用していて、これらすべての厚さをロードしている場(chǎng)合は、テキストを間違いなく調(diào)整して読みやすくする必要があります。

長(zhǎng)いテキストセグメント間の違いを比較すると、この効果を見(jiàn)つける方が簡(jiǎn)単です。今回はliterataフォントを使用します。

右側(cè)のテキストは厚く感じられますが、そうではありません。これは単なる視覚的な幻想です - 上記の2つの例のフォントの厚さは500です。

したがって、この問(wèn)題を解決するために、上記の例と同じことを行うことができます。

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

繰り返しますが、これは微妙な変化ですが、これらのサイズでは、タイポグラフィの改善がすべて読書(shū)體験に貢獻(xiàn)するため、それは重要です。

また、小さなGoogleフォントプロンプトもあります！

Googleフォントを使用すると、ドキュメントを通過(guò)できます部分的に追加されました<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>

...何も起こりません！実際、フォントはまったくロードされません。代わりに、次のように、必要なフォントの厚さ値の範(fàn)囲を宣言する必要があります。

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

上記のコードの@300..500セクションは、Googleフォントに300?500のすべての厚さのフォントファイルをダウンロードするように指示しています。あるいは、各厚さの間にセミコロンを追加すると、300と500の厚さのみをダウンロードします。たとえば、301の厚さを選択することはできません。

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

何がうまくいかなかったのか、なぜフォントがまったくロードされていなかったのかを把握するのに數(shù)分かかりました。そのため、Googleフォントチームが將來(lái)、埋め込みコードを少し明確にすることを願(yuàn)っています。たぶん、オプションまたはトグルスイッチをどこかに追加して、範(fàn)囲または特定の重量を選択する必要があります（または、表示されなかっただけかもしれません）。

とにかく、だからこそ、可変フォントがとても便利だと思います。彼らは、私たちがこれまでにできなかった方法でテキストを調(diào)整することを可能にします。だから、可変フォントを長(zhǎng)く生きてください！

以上がダークモードと可変フォントの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。