フォントファミリー（font-family)の指定については、多くのサイトがそれぞれの工夫を重ね、デザイナーの意見なども含めて記載してある。結局どれが一番いいのか？ということで、毎回サイトを作成するたびに悩んできた。
あれこれと悩むより、有名サイトから拾ってきた方が確実では？？
ということで、今現在は下記の設定にしている。
|
1 2 3 4 |
.font-inherit{ font-family: '-apple-system', 'BlinkMacSystemFont','Hiragino Sans','Hiragino Kaku Gothic ProN', "segoe ui",'游ゴシック Medium','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; } |
各有名サイトのフォントファミリー（font-family)指定を見てみる。
ＭＳＮニュース
言わずとしれた、ＭｉｃｒｏＳｏｆｔのニュースページ。
最初にここを参照したのは、フォントの指定方法によっては、ＩＥやエッジというブラウザでの文字が汚くなりがちだったからです。
ここでの設定はこのようになっています。
|
1 2 3 4 5 6 |
/*media all*/ body, button, input, select, textarea { font-size: 1.4rem; line-height: 1.357; font-family: "segoe ui",meiryo,"yu gothic","hiragino kaku gothic pron",sans-serif; } |
Segoe（シーゴー、シーゴ）はマイクロソフト社が使用している書体の一つ。officce製品や、Win7などのシステムフォントにも採用されているフォント。そのためTOPに指定されていると思われる。
ｙａｈｏｏニュース
yahooニュースは「遊」系のフォントは使用せずに、IE等では安定のメイリオでスタートしている。
ただし、指定の順番として和文フォント ＞ 欧文フォントなので、欧文フォントはほとんど使用されない可能性があります。
|
1 2 3 4 5 |
/*media all*/ body, input, textarea, select { color: #333; font-family: "メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif; } |
Ａｐｐｌｅ
では、Ｍａｃ、ｉＰｈｏｎｅ、ｉＰａｄなどの製品を出している、Ａｐｐｌｅはどうなのか？
|
1 2 3 4 |
/*media all*/ :lang(ja).intro { font-family: "SF Pro JP","SF Pro Display","SF Pro Icons","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック","Helvetica Neue","Helvetica","Arial",sans-serif; } |
https://www.google.co.jp/intl/ja/about/
Ｇｏｏｇｌｅのfont-family指定は非常にシンプルです。
下記は会社情報などのページで指定してあったfont-familyです。
|
1 2 3 4 5 |
body, html { color: #757575; font-family: Roboto,Arial,Helvetica,sans-serif; font-size: 16px; } |
その他参考になるサイト
Font-familyメーカー：標準フォント一覧からサクッと指定
https://saruwakakun.com/font-family
このサイトでのお勧め設定は、下記のようになっていました。
|
1 |
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; |
font-familyで指定できるフォント名一覧 – W3G
https://w3g.jp/sample/css/font-family
ios11以前と以降での、-apple-systemの表示
https://qiita.com/a_t/items/18693be11bd87f98d212
