webフォントを1つも読み込んでいません。下の各行は違う指定で、実際に当たった書体名を欧文・和文それぞれについて青字で出しています。同じスタックでも欧文と和文で別の書体が当たることが、そのまま確認できます。結果は閲覧している端末によって変わります。
推奨のスタック — var(--font-sans)
春はあけぼの。Web Typography 2026。
OSのUIフォント — system-ui
春はあけぼの。Web Typography 2026。
指定なし(ブラウザ既定) — 初期値
春はあけぼの。Web Typography 2026。
Yu Gothic を Medium 抜きで指定 — "Yu Gothic", sans-serif(Windowsで細くなる)
春はあけぼの。Web Typography 2026。
| 種類 | おおよその容量 | 理由 |
|---|---|---|
| 欧文 | 20〜100 KB | 必要な字形が数百字 |
| 和文 | 2〜5 MB | 漢字だけで数千字ぶんの字形を持つ |
| 和文(サブセット分割) | 初回 100〜300 KB | 使う字だけを順次取得。それでも欧文より重い |
判断の順序は「まずOS標準で組んでみる → それで足りない理由を言えるならwebフォントを検討する」です。逆順にすると、容量を払ってから理由を探すことになります。
なお、和文の書体判定は欧文より厄介です。和文の字はどれも同じ全角幅なので、書体が変わっても描画幅が1pxも動きません。ここでは墨が乗る範囲(actualBoundingBox)まで含めて比較しています。それでも、当たっている書体が総称ファミリの既定とまったく同じ場合は区別が付かず、その旨を表示します。