この記事の目次 開く・閉じる
今回の仕上がり
Modern Font Stacksは、system-fontsが公開する書体分類別のCSSセットです。フォントファイルを配る素材ではありません。端末にある書体を候補の順に指定し、最後に汎用書体へ任せます。
今回は3つのセットを自作例に取り込み、同じ英数字と日本語を表示しました。選択を変えるとCSSの指定と見た目が切り替わり、この作例から外部リソースの読み込みは発生しませんでした。書体を揃えることより、端末の書体を使って軽く表示したい場面に向きます。
操作手順
- 作例の「CSSのセット」でSystem UIを選びます。
- Transitionalへ変更し、英数字の線や字幅を見比べます。
- Monospace Codeへ変更し、数字やIl1の形を確かめます。
- 表示されたfont-family指定を、自分の対象要素に適用します。保存用ZIPを展開すればexample.htmlをそのまま開けます。
3つの候補一覧は公式配布元から採用しました。画面に示すのは指定候補です。computed styleに候補が並ぶことだけでは、どの文字をどのフォントで描画したかまでは確定できません。
注意点と確認範囲
公式リポジトリのコードはCC0 1.0です。取得したライセンス全文を作例にも同梱しています。CSSの利用条件が、端末内の各フォントファイルの再配布許可になるわけではありません。ZIPにはフォントを含めていません。
同じCSSでもOSやインストール済み書体、文字によって見え方は異なります。今回確認したのはWindowsのChromeでの3セット切り替えです。別OS、すべての日本語字形、端末間の同一表示は未検証です。公式の速度やレイアウトに関する表現を、この作例だけで一般保証にはしていません。
操作できる作例
確認日：2026年10月30日。PCブラウザとスマホ幅で確認。スマホ実機・読み上げ・全ブラウザは未確認です。