【Labs】フォントの設定はこれで決まり【2018年度版】
こんにちは(・∀・)
CSSでフォントの種類を指定する場合、「font-family」で指定しますが、
フォントは何を指定してますか⁉️
font-family
定番の設定としては次のような感じですね。
.sample {
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック","MS PGothic",sans-serif;
}
Windowsなら「メイリオ」や「MS Pゴシック」、Macなら「ヒラギノ角ゴシック」を指定していたと思います。
皆さんもご存知のGoogleのフォント設定は次の通りです。
.sample {
font-family: arial,sans-serif;
}
とてもシンプルです。
「arial」と総称ファミリ名の「sans-serif」だけでWebサイトをゴシック体系で表示させる設定にしています。
この設定だと、Windowsなら「メイリオ」、無ければ「MS Pゴシック」、Macなら「ヒラギノ角ゴシック」、無ければ「Osaka」などのブラウザ標準フォントで表示され、英数字は「arial」で表示されます。
印刷などへの影響を考慮しなくてもよければWebサイトのフォント設定はこれで良いのではと思います。
個人的には「arial」ではなく「Verdana」を使いたいかな...というか使ってます。
游ゴシック・游明朝
字游工房のフォント「游ゴシック・游明朝」です。
特にゴシック体の「游ゴシック」は最近よく見るようになってきました。
ゴシック体にしては柔らかめの書体と、WindowsとMacの両方で使え、同じ表示にできるということで、当サイトでも最近使うようになりました。
CSSでは次のように設定します。
.sample {
font-family: "游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,sans-serif;
}
Macでは普通に「"游ゴシック体",YuGothic」を指定、Windowsではフォントの太さ対策に、「"游ゴシック Medium","Yu Gothic Medium"」を指定して調整します。
San Francisco
Apple純正のフォント「San Francisco」を使用する場合は次のように記述します。
.sample {
font-family: -apple-system,sans-serif;
}
しかし上記の指定ではChromeで「San Francisco」のフォントが反映しません。
なのでChromeでも「San Francisco」で表示できるように次のように記述します。
.sample {
font-family: -apple-system,BlinkMacSystemFont
,sans-serif;
}
最後に、当サイトのフォント設定もご紹介します。
Webフォント以外は次のように設定していて、今現在の「決定版」です、当分これでいこうと思ってます。
.sample {
font-family: Verdana,"游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,sans-serif;
}