ダークモードと可変フォント

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

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

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

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

この問題をどのように解決できますか？

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

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

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

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

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

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

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

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

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

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

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

Googleフォントを使用すると、ドキュメントを通過できます部分的に追加されました<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フォントに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フォントチームが将来、埋め込みコードを少し明確にすることを願っています。たぶん、オプションまたはトグルスイッチをどこかに追加して、範囲または特定の重量を選択する必要があります（または、表示されなかっただけかもしれません）。

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

以上がダークモードと可変フォントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。