font-size
font-size は CSS のプロパティで、フォントの大きさを定義します。フォントの大きさを変更すると、フォントの大きさに相対的な <length> の単位例えば em, ex, なども更新されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
rem values 「レム」値 | 31 | 12 | 31 | 7 | 42 | 7 |
xxx-large `xxx-large` キーワード | 79 | 79 | 70 | 16.4 | 79 | 16.4 |
| その他 | ||||||
| font-size フォントサイズ属性は、複数行レイアウト環境でテキストを複数行にわたって設定する際に、baseline/typographyからベースラインまでのフォントのサイズを参照します。 | 1 | 12 | 1 | 1 | 18 | 1 |
注釈 2件
実装メモ
- Firefox 57 より前では、em 単位を使用するアニメーションは、アニメーション要素の親の `font-size` の変更の影響を受けません (バグ 1254424)。
- Firefox 57 より前では、一部の言語設定の継承された `font-size` が予想より小さくなっています (バグ 1391341)。
基本構文
CSS
html { font-size: 16px; }
body { font-size: 1rem; }
h1 { font-size: 2.5rem; }
small { font-size: 0.875rem; }ライブデモ
実務での使いどころ
-
レスポンシブタイポグラフィスケール
html要素にベースフォントサイズを設定し、rem単位で一貫したタイポグラフィスケールを構築します。
注意点
- px固定のfont-sizeはブラウザのフォントサイズ設定を上書きするため、アクセシビリティの観点からrem単位の使用を推奨します。
アクセシビリティ
- WCAG 1.4.4に準拠するため、テキストサイズは200%まで拡大可能であるべきです。rem/em単位を使用してブラウザの拡大機能を妨げないでください。