Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【CSS Modules】size-adjustアットルール記述子の使い方

size-adjustアットルール記述子の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

size-adjustプロパティは、CSSの@font-faceルール内で、特定のフォントの表示サイズを調整するための値を保持するプロパティです。このプロパティは、ウェブページでカスタムフォントを使用する際、フォントの文字の幅や高さなどのメトリック情報を調整するために利用されます。主な目的は、カスタムフォントが読み込まれなかった場合に表示される代替フォントとの間で、見た目のサイズ感を統一し、レイアウトの崩れを防ぐことです。値はパーセンテージで指定し、「size-adjust: 200%;」のように記述することで、フォントの各グリフサイズを調整できます。これにより、異なるフォントが同じテキストを表示する際の見た目の不整合を最小限に抑え、安定したユーザーインターフェースを提供します。このsize-adjustは、CSSの一般的なプロパティとは異なり、@font-faceルールにのみ適用される記述子である点にご注意ください。

公式リファレンス: size-adjust

構文(syntax)

1@font-face {
2  size-adjust: 100%;
3}

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ