可変フォントを使う（HTML/CSS）
前書き
可変（バリアブル）フォントは、文字の太さを区切りなく変更できるフォントです。
フォントによっては、文字の幅や傾きなども同様に変更できます。
可変でないフォントで文字の太さを変更する場合には、太さごとにフォントファイルを用意する必要がありますが、可変フォントを用意すれば、その一つで事足ります。
目次
- 和文フォント
- 英文フォント
- 参考
和文フォント
NotoSansJP
Noto Sans CJK Version 2.004をダウンロードして、WOFFコンバーターで変換して使用しています。
いろはにほへと
山高故不貴
ABCDE 12345
山高故不貴
ABCDE 12345
太さ
@font-face {
font-family: "NotoSansJP-VF";
src: url("path/NotoSansJP-VF.woff2") format("woff2-variations");
font-weight: 100 900;
font-display: swap;
}
font-family: "NotoSansJP-VF";
| フォント名 | 変換前 | woff2 変換後 |
|---|---|---|
| NotoSansJP-VF | 9.37MB （ttf形式） |
4.37MB |
| NotoSansJP-Regular | 4.43MB （otf形式） |
3.32MB |
その他の和文フォント
英文フォント
Inter
Inter-3.19をダウンロードして使用しています。
ABCDE abcde
12345
12345
太さ
傾き
@font-face {
font-family: "Inter var";
src: url("path/Inter-var.woff2") format("woff2-variations");
font-weight: 100 900;
font-display: swap;
}
font-family: "Inter var";
| フォント名 | woff2 |
|---|---|
| Inter.var | 317KB |
| Inter-Regular | 97KB |
その他の英文フォント
参考
Wakamai Fondue, the tool that answers the question “what can my font do?”
関連記事
OSに標準搭載されている和文フォントを使う（HTML/CSS）
この記事は役に立ちましたか？
送信中
