疑問ちゃん
font-familyの意味と記述方法を教えてください
今回はfont-familyについて解説していきます。
font-familyとは？
font-familyとは、テキストを表示させるフォントの種類を指定できるプロパティです。
font-familyに指定できる値
・フォント名
フォントの種類をフォントの名前で指定します。Arialなど。
・serif,sans-serif,cursive,fantasy,monospaceフォントのおおまかな種類を表す５つのキーワード。
serif: 明朝系フォント
sans-serif: ゴシック系フォント
cursive: 草書体・筆記体系フォント
fantasy: ポップ系フォント
monospace: 等幅フォント
参考 font-familyで指定できるフォント一覧W3G
指定できるフォント一覧またどんな書式であるのかは上の記事が参考になると思います。
font-family記述方法
さっそくコード例を見ていきましょう。
body{
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif;
}
疑問ちゃん
たくさんのフォントが指定してあるけどどうゆう意味なの？
複数フォントを指定してある理由は、指定したフォントが閲覧者の環境にインストールされていない場合に備えてカンマで区切って複数してあります。
より左側に指定してあるフォントが閲覧者の環境で利用可能なものを採用していきます。
フォント名として指定できるのは、引用符（”または’）で囲った文字列かCSSで識別子として認識された文字列だけです。
疑問ちゃん
最後の記述してあるsans-serifは引用符で囲ってないのはなぜ？
最後に描くフォントを表す５つのキーワードに関しては、引用符をつけると認識されなくなるので引用符で囲っていません。
まとめ
フォントの種類でWEBサイトの雰囲気が変わるのでいろんなフォントを探して見てください。
それではまた。
