結論
状態:-
閲覧数:15,304
投稿日:2010-04-19
更新日:2018-02-10
標準とされているfont-family設定など存在しない
・みんな主張している内容はバラバラ
・手法は未だに統一されていない
気にしないことに決めた
・フォント指定は、ほどほどに
・やり始めるとキリがない
・深みに嵌るとなかなか抜け出せなくなるので、適当に切り上げることが大切
・みんな主張している内容はバラバラ
・手法は未だに統一されていない
気にしないことに決めた
・フォント指定は、ほどほどに
・やり始めるとキリがない
・深みに嵌るとなかなか抜け出せなくなるので、適当に切り上げることが大切
現在、標準とされているfont-family設定は？
疑問に思っていた頃のメモ
標準とされているfont-family設定を知りたい
・フォントにこだわりを持っているわけではありませんが、なるべく、標準的なWebサイトを制作したいと思っています
・そこで、現在、標準とされているfont-family設定について知りたいのですが、ネットでみる限り、人の数だけやり方がある感じで、標準的な手法がイマイチ分かりません
・今、最も一般的なfont-family設定は、どんな感じなのでしょうか？
調査履歴
案3
body {
font-family: Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", 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>: 外部リソースへのリンク要素
終了タグは置いてはいけません
フォント変更履歴
⇒ 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;
}
フォント調査
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, "ＭＳ Ｐゴシック", 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;
}調査してみて気がついたこと
誇大表現のオンパレード
Google検索結果が、誇大表現のオンパレードで嫌になる
・詳しい人ほどこの問題の根が深いことを知っているため、断定的口調を避ける傾向にある、と思われる
Font−familyのベストな書き方 2017年版
今回は以下の2種類のFont−familyをおすすめします。
・ベストじゃないやん！主張はバラバラ
標準とされているfont-family設定など存在しない
・従来通り
最もらしいタイトルは並んでいるが、みんな言ってることはバラバラ
Font−familyのベストな書き方 2017年版
font-familyに指定する2017年春の決定版メモ
【2017年版】これで間違いなし！font-familyのおすすめ設定