font-familyに記述する順番って何か関係あるの?と思ったので調べてみた。
こんにちは、Web制作をしているOuiです。
いつもWeb勉強中です。
今回はふとあれ?と思ったCSSの記述の勉強し直し。
font-familyの記述の順番の意味について
学校で習った時、font-familyを丸暗記してしまいました。
改めて、font-familyの順番の意味について調べた次第です。
前に行くほど優先順位が高い
font-familyで指定したフォント。
最初に指定したフォントの種類が、より優先して表示される。
使いたいフォントを、最初に記述すること。
Tips
アルファベットを指定しておきたい場合
=英語フォントを、日本語フォントより先に指定しておく
Tips2
sans-serifの意味とは
指定したフォントがブラウザにない場合、使用される最低限のフォント。
sans-serif=ゴシック体
serif=明朝体
など。
個人的に好きなfont-family
・游ゴシック
・游明朝
まとめ
現在、メイリオ、ヒラギノ角ゴシックProNを使っているサイトが多い。
フォントにこだわることで、差別化出来る。
サイトの印象も、おしゃれに変わったりする。
参考にしたサイト
小粋空間さん
http://www.koikikukan.com/archives/2012/08/13-023456.php
HTMLクイックリファレンス
http://www.htmq.com/style/font-family.shtml
サルワカさん
https://saruwakakun.com/html-css/basic/font-family-how-to
MDN
https://developer.mozilla.org/ja/docs/Web/CSS/font-family
WPJ
https://www.webprofessional.jp/20-inspirational-free-resources-for-better-typeface-pairing-2/
好きなフォントのサイト
cocoda!
https://www.cocoda-design.com/
いまでは、以下のように書いています。
font-family:
-apple-system, BlinkMacSystemFont,
“Noto Sans JP”,
“Helvetica Neue”, YuGothic,
“Yu Gothic”, Verdana, Meiryo,
sans-serif;