Posted on

font-familyには延々と悩まされてきましたがここに来て、いよいよ笑

 

Windows PCを購入

しました。ということでWindows 10でこのブログも更新することになります。

カラダにいいノートPCの選び方。その秘訣は１キログラム未満！？
しばらくの間、外でネットとか使う時はタブレットを使っていました。しかし業務で外出があるとどうしても会社のPCを持ち歩くことになるんですけど肩にずっしり。辛い… ということ...
days on bouts

となると否応なしにフォントが汚いなぁ、おかしい、と気が付くことになるわけです。

でまずはEdge

Windows 10ってことは標準ブラウザはEdge。

Internet Explorerも入ってるくせにEdgeが標準指定されています。使ってる人いるんかいな、と思っていたのですがInternet ExplorerはWebを仕事にしているともれなく大嫌いになっていますから、自分もWindows PCを買ってからはEdgeを標準に使ってます。いまは「シンプルでなかなかいいじゃん」という気持ちにまでなってます。

でこのブログを見てみたら、Webフォントが反映されたりされなかったりする！？

なんやねん、ということでこのへんだろうな、とAutoptimizeプラグインの設定で「Google Fonts」の項目を「webfont.js で非同期にフォントを結合して読み込む」→「Combine and preload in head (fonts load late, but are not render-blocking)」へ変更してみたところ、症状が出なくなりました。

今度は

あれっ、明朝がなんか髭ボウボウで汚いな！、Chromeでみればゴシックがかすれてる！なんなん全部見直しかい！ということでまずは

確認するブラウザ

  • Mac
    • Safari
    • Chrome
  • Windows 10（Windows 7は今年限りの命w）
    • Edge
    • Chrome
    • Internet Explorer
  • iOS
    • Safari
  • Android
    • Chrome

でやってます。FireFoxさんごめんなさい、シェアは少ないけど個人的には一番信頼してるよ。

こんなフォントにするよ

ゴシック (sans-serif)

明朝 (serif)

負荷の高いWebフォントの利用は最低限にしたつもり。あと、Vollkornはこのブログに合わせてちょっと遊びがあるフォントで標準で入っているPalatino Linotypeに置き換えてもいいと思います。

で、2019年font-family決定版！

ということでいよいよfont-familyがどうなったか発表です。

ゴシック (sans-serif)

font-family: ‘San Francisco’, ‘Helvetica Neue’, HelveticaNeue, ‘Segoe UI’, Helvetica, ’游ゴシック Medium’, ‘Yu Gothic Medium’, ‘游ゴシック’, ‘Yu Gothic’, ‘游ゴシック体’, YuGothic, ‘Hiragino Kaku Gothic ProN’, HiraKakuProN-W3, ‘Noto Sans JP’, sans-serif;

明朝 (serif)

font-family: Vollkorn, ‘游明朝’, ‘Yu Mincho’, ‘游明朝体’, YuMincho, ‘Hiragino Mincho ProN’, HiraMinProN-W3, ‘Noto Serif JP’, serif;

ということになりました。以前のこの記事、

PageSpeed Insightsのスコアなどその後の変更について
その後も色々気になったところに手を入れてました。 https://days.bouts.id/posts/pagespeed-insights まずはテーマ 変え...
days on bouts

にも書きましたがいろんなブログで紹介されている「-apple-system」からは距離を置いてます。あとメイリオは嫌いなので使ってません。游ゴシックに「Medium」と付いてるのはChromeでのかすれ対策です。

font-familyで指定できるフォント名はこのページやそのほかいろいろ参照してみてください。ということで細かな解説はとりあえず割愛笑

まとめ

動いていると思うんですがなにかありましたらぜひ突っ込みを。また質問なども全然大丈夫です。

 

Tags:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です