【Labs】フォントの設定はこれで決まり【2018年度版】

こんにちは（・∀・）

CSSでフォントの種類を指定する場合、「font-family」で指定しますが、

フォントは何を指定してますか⁉️

font-family

定番の設定としては次のような感じですね。

.sample {
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

Windowsなら「メイリオ」や「ＭＳ Ｐゴシック」、Macなら「ヒラギノ角ゴシック」を指定していたと思います。

皆さんもご存知のGoogleのフォント設定は次の通りです。

.sample {
  font-family: arial,sans-serif;
}

とてもシンプルです。

「arial」と総称ファミリ名の「sans-serif」だけでWebサイトをゴシック体系で表示させる設定にしています。

この設定だと、Windowsなら「メイリオ」、無ければ「ＭＳ Ｐゴシック」、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;
}

関連リンク

【CSSリファレンス】font-family