【CSS Modules】font-optical-sizingプロパティの使い方

font-optical-sizingプロパティは、テキストの可読性を向上させるために、フォントのオプティカルサイジングを制御するプロパティです。多くのプロフェッショナルなフォントは、異なる文字サイズで最も美しく読みやすく表示されるように、文字の形状が微調整された複数のバリエーションを持っています。例えば、非常に小さな文字では線が太く見えるように調整されたり、大きな見出しのような文字では細部まで洗練された形状が用意されたりします。このようなフォントに組み込まれた、文字サイズに応じた字形の自動調整機能を「オプティカルサイジング」と呼びます。

このプロパティを使用することで、ウェブブラウザがこのオプティカルサイジング機能を利用するかどうかを開発者が指定できます。これにより、テキストの表示品質をさらに高めることが可能です。

指定できる値は主に二つあります。 一つ目は auto です。これはデフォルト値であり、ブラウザがテキストのサイズとフォントの種類に基づいて最適なオプティカルサイジングを自動的に適用することを意味します。多くの場合、この設定が推奨され、最も読みやすい結果をもたらします。 二つ目は none です。この値を指定すると、オプティカルサイジングが無効になります。つまり、文字サイズによるフォントの形状の自動調整は行われず、フォントはどのサイズでも基本的な単一の字形を使用します。

font-optical-sizingプロパティは、特に小さいテキストや非常に大きな見出しなどで、フォントが持つ本来の美しさや読みやすさを維持するために役立ちます。CSSを使ってウェブページの視覚的な品質を向上させたい場合に、このプロパティの利用を検討してください。

Copy
1.element {
2  font-optical-sizing: auto;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません