有名サイトのfont-familyを調べてみた

当ブログのfont-family選定の作業の一部です。決定版は次の記事参照です。

有名サイトのfont-family

font-familyGoogle - https://www.google.co.jp/
font-family: arial, sans-serif;

Yahoo!Japan - https://www.yahoo.co.jp/
font-family: "\30D2\30E9\30AE\30CE\89D2\30B4 Pro W3",Hiragino Kaku Gothic Pro,"\30E1\30A4\30EA\30AA",Meiryo,Osaka,"\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF",MS PGothic,sans-serif;

Facebook - https://www.facebook.com/
font-family: Helvetica, Arial, "hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif;

Wikipedia - https://ja.wikipedia.org/
font-family: sans-serif;

日経新聞 - https://www.nikkei.com/
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Noto Sans","Helvetica Neue","Helvetica","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;

時事ドットコム - https://www.jiji.com/
font-family: "ヒラギノ角ゴ ProN W3","HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","HiraKakuPro-W3","メイリオ",Meiryo,"MS Pゴシック","MS Pgothic","Osaka",sans-serif,Helvetica, Helvetica Neue, Arial, Verdana;

読売新聞 - https://www.yomiuri.co.jp/
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", "MS ゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;

毎日新聞 - https://mainichi.jp/
font-family: -apple-system,BlinkMacSystemFont,YuGothic,"游ゴシック","Yu Gothic","メイリオ",sans-serif;
朝日新聞 - https://www.asahi.com/
font-family: 指定なし

産経新聞 - https://www.sankei.com/
font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"MS Pゴシック","MS Pgothic",Osaka,sans-serif,Helvetica,Helvetica Neue,Arial,Verdana;

共同通信 - https://www.kyodo.co.jp/
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS Pゴシック", sans-serif;

共同通信(47NEWS) - https://www.47news.jp/
font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Noto Sans Japanese,Hiragino Sans,\\30D2\30E9\30AE\30CE\89D2\30B4 ProN W3,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;

首相官邸 - http://www.kantei.go.jp/
font-family: "HiraKakuPro",-apple-system, "Lucida Grande", "Helvetica Neue", "メイリオ", meiryo, "Hiragino Kaku Gothic ProN", sans-serif;

確認日 - 2020年02月05日

備考

上記の結果から読み取れた情報

  • mac和文は、ヒラギノが一般的(Osakaは、少数)
  • win和文は、メイリオが一般的(游ゴシックは、少数)
  • 未指定もあり
  • 先頭小文字もあり
  • 日本語表記する場合は、エンコードしたほうがいい?
  • 英字フォントを後方に記載する理由はあるのか?
    • 標準フォントが英字対応していない可能性かな?
    • そんなことあるのか?

font-family(mono)

font-family(mono)GitHub - https://github.com/
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;

Bootstrap - https://getbootstrap.com/
font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace

AtCoder - https://atcoder.jp/contests/agc040/submissions/9925635
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;

SyntaxHighlighter - http://alexgorbatchev.com/SyntaxHighlighter/ - shCore.css
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;

crayon-syntax-highlighter - https://github.com/aramk/crayon-syntax-highlighter - global_style.css
font-family: "Lucida Grande", Arial, sans-serif !important;

google-code-prettify - https://code.google.com/archive/p/google-code-prettify/ - prettify.css
font-family: 指定なし

PRISM - https://prismjs.com/
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace

highlight.js - https://highlightjs.org/ - style.cs
font-family: normal 10pt Consolas, Monaco, monospace

SHJS - http://shjs.sourceforge.net/
font-family: 指定なし

確認日 - 2020年02月07日

※有名サイトでソースコードおいてるサイトが思い浮かばなかったため、ソースコードハイライト表示系のサイト含む

備考

上記の結果から読み取れた情報

  • macは、SFMonoが一般的
  • winは、Consolasが一般的
  • 日本語(全角文字)への配慮は特に見られない
  • GitHub等では、上記設定で日本語文字を「Meiryo」で表示します
    • ブラウザ設定は特になし

関連

  1. font-familyを調べまわった結果のまとめ
  2. font-familyのソースコード用等幅フォント設定まとめ
  3. 有名サイトのfont-familyを調べてみた
  4. ブログのfont-family決定版

コメント