font-family設定

フォント

結論

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

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

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

 閲覧数:587 投稿日: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>: 外部リソースへのリンク要素
終了タグは置いてはいけません


フォント変更履歴

 閲覧数:548 投稿日: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;
}


フォント調査

 閲覧数:502 投稿日: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;
}


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

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

誇大表現のオンパレード


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

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

主張はバラバラ


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

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



無料系日本語フォント



週間人気ページランキング / 3-22 → 3-28
順位 ページタイトル抜粋 アクセス数
1 Design 0 42
2 LOCK: File currently in use. / マニフェストを読み込めませんでした 10
3 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
4 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 6
4 16進数カラーコード / 2進数 6
4 navタグで定義している部分だけCSSが効かない【html5】 | HTML5(HTML) 6
5 HLS / HSL 4
5 HTML5でiframeスクロールバーを表示しない方法が不明 | HTML5(HTML) 4
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
6 画像大きさ | 他サイト調査(HTML) 2
6 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 | Backgrounds and Borders Module(CSS) 2
6 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 2
7 Google Chrome を閉じた際にバックグラウンド アプリの処理を続行する / ハードウェア アクセラレーションが使用可能な場合は使用する 1
7 Chromeで名前を付けて保存する際、ファイルを一つにする方法 1
7 ログイン 1
7 「font-size」効果を打ち消すスタイルシートは、「font-size:100%;」? 1
7 イラスト素材 | デザイン 1
7 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 1
7 36ビットカラー 1
7 RGBの種類 / ビットカラー | RGB(色) 1
2024/3/29 1:01 更新