CSS

【font-family / font-size】フォントの設定

みいと

【font-family】フォントの種類の設定

font-familyプロパティは値にフォント名やキーワードを指定して、フォントの種類を指定することができます。

フォント名が空白文字を含んでいる場合などは、ダブルクォート(“)、またはシングルクォート(‘)で囲んで指定します。
フォントの種類はカンマ(,)区切りで複数のフォントを指定可能です。

body{font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif};

複数のフォントを指定した場合は、左側に書いてあるほうが優先順位が高くなります
閲覧する環境で使用できるフォントがあれば、その中で優先順位が高いフォントが選択されます。
使用できるフォントがない場合はブラウザの初期フォントが表示されます。

font-familyプロパティで使用できるキーワードは下記になります。

serif 明朝系フォント
sans-serif ゴシック系フォント
cursive 草書体・筆記体系フォント
fantasy ポップ系フォント
monospace 等幅フォント

font-familyにキーワードを指定する場合は、下記の点に注意してください。

  • キーワードは最後に指定する
  • キーワードに対してダブルクォート、シングルクォートをつけない(認識しなくなります)

【font-size】フォントの大きさの設定

font-sizeプロパティはフォントの大きさを設定することができます。

font-sizeプロパティの値には単位付きの数値が使用可能です。

ボックスの構造
ボックスの構造マージン、ボーダー、パディングなど、ボックスの構造についてザックリまとめました。...

その他の指定方法はパーセンテージとキーワードがあります。

パーセンテージ 親要素の文字に対する大きさをパーセンテージで指定します。
xx-small,
x-small,
small,
midium,
large,
x-large,
xx-large
xx-small最も小さい
x-small小さい
smallやや小さい
midium標準サイズ
largeやや大きい
x-large大きい
xx-large最も大きい
smaller 親要素の文字の大きさに対して一段階小さくする
larger 親要素の文字の大きさに対して一段階大きくする

フォントの種類と大きさのまとめ

今回はフォントの種類と大きさについてまとめました。
フォントの種類や大きさで見た目の印象が結構変わってくるので重要ですね。

まとめ

  • フォントの種類はfont-familyプロパティで設定する
  • 環境によって使用できるフォントが異なるので、フォントは複数指定する
  • フォントの大きさは、単位付きの数値やパーセンテージ、キーワードで指定できる

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました