font-family設定

フォント

結論

 状態:-  閲覧数:13,998  投稿日:2010-04-19  更新日:2018-02-10
標準とされているfont-family設定など存在しない
・みんな主張している内容はバラバラ
・手法は未だに統一されていない

気にしないことに決めた
・フォント指定は、ほどほどに
・やり始めるとキリがない
・深みに嵌るとなかなか抜け出せなくなるので、適当に切り上げることが大切

現在、標準とされているfont-family設定は?

 閲覧数:368 投稿日:2010-04-19 更新日:2018-03-21 

疑問に思っていた頃のメモ


標準とされているfont-family設定を知りたい
・フォントにこだわりを持っているわけではありませんが、なるべく、標準的なWebサイトを制作したいと思っています
・そこで、現在、標準とされているfont-family設定について知りたいのですが、ネットでみる限り、人の数だけやり方がある感じで、標準的な手法がイマイチ分かりません
・今、最も一般的なfont-family設定は、どんな感じなのでしょうか?

調査履歴


案3
body {
   font-family: Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", sans-serif;
}


案4
body {
   font-family: 'Droid Serif',Meiryo,"MS PGothic","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","sans-serif";
}


案99
・font-familyを指定しない

フォントAPI


Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access
・GoogleのフォントAPIは、日本語フォントを提供していない
Noto Sans Japanese
Google Fontsの日本語フォント「Noto Fonts」の使い方
ローカルに"Noto Sans CJK JP"がなければWebフォントの"Noto Sans JP"を利用するCSSの指定方法
Noto CJK – Google Noto Fonts
Google Fonts 日本語フォントについて
Google Fonts 日本語フォントについて

<link>: 外部リソースへのリンク要素
終了タグは置いてはいけません


フォント変更履歴

 閲覧数:333 投稿日:2014-09-05 更新日:2018-02-10 

⇒ 2016/7/22


CSS
body {
   font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}


2016/7/22 ⇒ 2018/2/10


中止期間
・2016/10/16 ⇒ 2017/11/20

CSS
/* フォント書体 */
body {
 font-family:Verdana, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}


2016/10/17 ⇒ 2017-11-19


最新のシステムフォントに寄せる
・MyYuGothicMの定義(共通)
・游ゴシックメインの指定
モダン日本語フォント指定

CSS
html {
font-family:
MyYuGothicM, /* Windows 游ゴシック */
YuGothic, /* OS X 游ゴシック */
-apple-system, /* iOS San Francisco */
BlinkMacSystemFont, /* iOS Chrome San Francisco */
"Hiragino Kaku Gothic ProN", /* OS X, iOS ヒラギノ */
Meiryo, /* Windows メイリオ */
sans-serif;
}


最終的に
・万人受けする綺麗さだと思われるけれども、個人的に大きい文字には「減り張り」を強調したいので変更

2017-11-20


Winにはメイリオ, Macにはヒラギノを使用
・字間が詰まっているため、思った以上に読みにくいかも

CSS
body {
 font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
}


結局
・一日使用しただけで他へ変更

2018/2/10 ⇒


変更経緯
PDFかと見紛うWebサイトに遭遇
・フォント確認してみたら、Noto Sans Japanese だった

html
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">


CSS
/* フォント書体 */
body {
 font-family:Verdana, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
h1,h2,h3,h4,h5.h6 {
 font-family:'Noto Sans Japanese', sans-serif;
}


変更してみて
・Google FontのCDNを経由しても、フォント読込は遅くなる
・速度計測はしていないが、目視確認できるレベルで、明らかに従来より遅くなってしまった
・しかし、耐えられないレベルではないので、しばらく様子見
・遅い回線だと、もしかすると厳しいかもしれない

本文
・目がキツくなる
・理由不明
・参考サイトでは問題ないのに…
・フォントサイズが小さいから?
・しょうがないので、hタグのみ「Noto Sans Japanese」を適用し、他は従来のフォントを継続使用することにした

色々検討した結果
・下記でしばらく様子見することにした
・正直、良くわからない
・「sans-serif;」付与していたり、付与していなかったり
・「@import url」で掲載したり、「<link href」で掲載していたり

html
<link href="//fonts.googleapis.com/earlyaccess/notosansjp.css" rel="stylesheet">


CSS
/* フォント書体 */
body {
 font-family:Verdana, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
h1,h2,h3,h4,h5.h6 {
 font-family: 'Noto Sans JP', sans-serif;
}


フォント調査

 閲覧数:276 投稿日:2014-09-05 更新日:2018-02-10 

Yahoo!JAPAN


2012/1/26時点の、Yahoo!JAPAN / トップページ / フォントfont-family設定
body {
   font-family: "MS PGothic","Osaka",Arial,sans-serif;
}


2012/1/26時点の、Yahoo!JAPAN / ニュース個別ページ / フォントfont-family設定
body {
   color: #333333;
   font-family: "MS PGothic","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","sans-serif";
}



NHK


2014-9-5頃

HTML
・htmlへ直書している理由は、文字の大きさをユーザが選択変更可能にするため
<body id="detail" style="font-size: 13px;">


CSS
media="screen, projection"
body {
font: 13px/1.5 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "メイリオ", Meiryo, "MS Pゴシック", Arial, verdana, sans-serif;
color: #333;
background: #f4f5ed url(../images/bg.png);
}

media="screen, projection"
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}


ライブドア


2014-9-5頃

CSS
body {
line-height: 1.231;
color: #2d2d2d;
font-family: 'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',arial,sans-serif;
font-size: 16px;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, textarea, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
font-size: 100%;
word-break: break-all;
word-wrap: break-word;
}


NAVERまとめ


2014-9-5頃

CSS
body.ExOsWin {
font-family: Meiryo,"MS PGothic",arial,sans-serif;
}

body {
font: 12px/1.5 arial,sans-serif;
}


調査してみて気がついたこと

 閲覧数:132 投稿日:2018-02-10 更新日:2018-02-10 

誇大表現のオンパレード


Google検索結果が、誇大表現のオンパレードで嫌になる
・詳しい人ほどこの問題の根が深いことを知っているため、断定的口調を避ける傾向にある、と思われる

Font−familyのベストな書き方 2017年版
今回は以下の2種類のFont−familyをおすすめします。
・ベストじゃないやん!

主張はバラバラ


標準とされているfont-family設定など存在しない
・従来通り

最もらしいタイトルは並んでいるが、みんな言ってることはバラバラ
Font−familyのベストな書き方 2017年版
font-familyに指定する2017年春の決定版メモ
【2017年版】これで間違いなし!font-familyのおすすめ設定


Twitter検索結果。「font-family設定」に関する最新ツイート


無料系日本語フォント



週間人気ページランキング / 7-26 → 8-1
順位 ページタイトル抜粋 アクセス数
1 画面キャプチャ | Chrome 拡張機能(ブラウザ) 51
2 RGB ⇔ Lab | 色変換(色) 46
3 血の色 / #b30000 / #360800 / #ff0000 | 色 31
4 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 25
5 RGBの種類 / ビットカラー | RGB(色) 24
6 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 23
7 「属性」「プロパティ」「アトリビュート」の違い | CSS 21
8 Design 0 20
9 「bgcolor」「background-color」「background」の違い | CSS 15
10 コズミックブルーが何色か分からない | 色 12
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 12
11 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 11
11 HSLとHSVの違い | 色変換(色) 11
12 ページ内リンクの位置を微調整するためには、Negative margin を使用する | CSS 10
13 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 9
13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 9
13 アドベンチャーゲーム系の素材をどうやって用意するの? | イラスト素材(デザイン) 9
13 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 9
13 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
14 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 8
2021/8/2 1:01 更新