CSS

【font-weight / font-style / font-variant】フォントの設定

みいと

【font-weight】フォントの太さ設定

font-weightプロパティはフォントの太さを設定するプロパティです。
下記の値、キーワードで設定します。(初期値はnormal)

bold 太字(↓の700と同じ)
100,
200,
300,
400,
500,
600,
700,
800,
900
100〜900の9段階指定。
400が標準の太さで数字が大きいほど太くなります。
例)100, 200, 300,400, 500, 600, 700, 800, 900
ちょっと変化がわかりにくいですね(;^ω^)
bolder 現在よりも1段階太くします。
lighter 現在よりも1段階補足します。
normal 標準の太さにします。(400と同じ)

【font-style】斜体の設定

font-styleプロパティはイタリックまたは斜体を設定するプロパティです。
下記のキーワードで設定します。(初期値はnormal)

italic イタリック体で表示されます。例)italic
oblique 斜体で表示されます。斜体がない場合は標準のフォントを斜めにして表示します。例)oblique
normal 標準のフォントで表示されます。例)normal

【font-variant】スモール・キャピタルの設定

font-variantプロパティはスモール・キャピタルを設定するプロパティです。

small-caps 大文字を小さくしたようなフォントで表示されます。
例)font-variant:small-caps
normal 標準のフォントで表示されます。
例)font-variant:normal

フォントの設定のまとめ

今回はfont-weight、 font-style、font-variantについてまとめました。
font-weightを使うと文字が太くなり、目立つので使用頻度が高そうですね。

まとめ

  • font-weightはフォントの太さを設定するプロパティ
  • font-styleは斜体を設定するプロパティ
  • font-variantはスモール・キャピタルを設定するプロパティ

フォントの設定
【font-family / font-size】フォントの設定CSSのフォント設定のうち、font-familyとfont-sizeについてザックリとまとめました。...
ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました