【CSS Modules】font-synthesis-small-capsプロパティの使い方

font-synthesis-small-capsプロパティは、フォントがスモールキャップ（小型大文字）のデザインを持たない場合に、ウェブブラウザがそのスタイルを合成して表示するかどうかを制御するプロパティです。スモールキャップとは、見た目には大文字でありながら、一般的な小文字と同じくらいの高さで設計された特殊な文字スタイルを指します。多くのプロフェッショナルなフォントは元々スモールキャップのデザインを内包していますが、そうではないフォントが使われる際、ウェブブラウザは、通常の大文字を縮小することで、見た目上スモールキャップであるかのように「合成」して表示することがあります。

このfont-synthesis-small-capsプロパティを用いることで、開発者はこのブラウザによる合成処理を許可するか、それとも禁止するかを明確に設定できます。たとえば、autoの値を設定すると、ブラウザはフォントにスモールキャップのデザインが不足している場合でも、必要に応じて自動的にそのスタイルを合成して適用します。これにより、特定のフォントでスモールキャップを表示したいというデザインの要求を満たすことができます。

一方で、noneの値を設定した場合は、ブラウザはスモールキャップの合成を一切行いません。この設定では、テキストは、使用されているフォントが元々スモールキャップのデザインを内包している場合にのみ、そのスタイルで表示されます。合成されたスモールキャップは、本来デザインされたものと比較して、文字の太さやバランスが不自然に見えるなど、視覚的な品質が低下する可能性があります。そのため、デザイナーや開発者は、デザインの整合性やテキストの可読性を確保しながら、フォントの表示を最適化したい場合に、このプロパティを活用して合成の挙動を調整します。

Copy
1p {
2  font-synthesis-small-caps: auto;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません