2019.11.20 2019.11.25

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

みいと

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

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

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

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

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

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

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

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	親要素の文字の大きさに対して一段階大きくする

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

まとめ

ABOUT ME