CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

【CSS】font-size-adjustプロパティの使い方｜フォールバック時の可読性を維持する方法

CSSのfont-size-adjustプロパティは、フォントフォールバック（指定したフォントが利用できない環境で代替フォントへ切り替わること）が発生した際にも、テキストの可読性を維持するために使用されます。本記事では、その基本的な仕組みと実装例をコード付きで解説します。

font-size-adjustプロパティとは

Webページで指定したフォントがユーザーの端末にインストールされていない場合、ブラウザは自動的に代替フォントで表示します。しかし、フォントごとに文字の大きさやx-height（小文字「x」の高さ）の比率が異なるため、同じfont-sizeを指定していても、実際に表示される文字の見た目の大きさが変わってしまうことがあります。

これにより、レイアウトの崩れや読みにくさが発生します。font-size-adjustプロパティを使えば、フォントのアスペクト値（x-heightとfont-sizeの比率）を基準にサイズを調整でき、どのフォントで表示されても視覚的な文字サイズを一定に保つことができます。

構文

font-size-adjust: none | <number>;
  • none … サイズの調整を行いません（初期値）。
  • <number> … フォントのアスペクト値を数値で指定します（例：0.90）。

実装例

次のコードは、font-size-adjustプロパティを使用した例です。.demoクラスを適用した要素には「0.90」が設定されており、プロパティあり・なしでテキストの表示を比較できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo {
            font-size-adjust: 0.90;
         }
      </style>
   </head>
   <body>
      <h2>Heading Two</h2>
      <h2>font-size-adjustプロパティあり：</h2>
      <div class="demo">
         これはデモテキストです。
      </div>
      <h2>font-size-adjustプロパティなし：</h2>
      <div>これはデモテキストです。</div>
   </body>
</html>

対応ブラウザ

font-size-adjustプロパティは、以前はFirefoxでしかサポートされていませんでしたが、近年ではChrome（バージョン127以降）、Edge、Safari 17以降など、主要ブラウザでも利用できるようになっています。ただし、古いブラウザでは無視される場合があるため、重要なテキストにはフォールバック用のスタイルを併せて指定しておくと安心です。


  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります