2017年10月13日(金)

【CSS】Chrome問題対応済の游ゴシック font-family 完全版！これなら2020年まで使えます（多分）

※執筆時点での情報を元にしているため、内容が異なる可能性があります。

▼2018年4月9日追記
本記事で紹介している font-face の方法はChrome62以降、機能していないようです。
代わりに以下の font-family を利用して下さい。

font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic;

以下は、2017年10月13日までの情報です。機能していないのでご注意下さい。

游ゴシック体を指定するフォントファミリーを調べると、「2020年まで使えるfont-familyおすすめゴシック体」の記事が見つかると思います。ベースはこちらを利用しました。

しかし、このコードをそのまま使うと、大きく以下4つの問題が発生しました。

Excelの入った游ゴシックOFFのMacでメイリオが表示される
Edge, Firefox だと游ゴシックが少しだけ細い印象になる
ハイコントラストモードがオンのEdgeでメイリオが表示される
button,input,select,textarea には適用されない

font-family は昔から根が深い問題ですね…。ということで、これら4つの問題を改善したものができたので共有します。少し長いのでSASSで書いています。あとJS必須です。

$BASE_FONT_FAMILY: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "Original Yu Gothic", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "M+ 1p", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 500;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face{
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 500;
}
@font-face{
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: bold;
}
body {
  font-family: $BASE_FONT_FAMILY;
  button,input,select,textarea {
    font-family: $BASE_FONT_FAMILY;
  }
  &.IE {
    font-family: Arial, Verdana, "メイリオ", Meiryo, "MS ゴシック", "MS Gothic", sans-serif;
    button,input,select,textarea {
      font-family: Arial, Verdana, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    }
  }
}

使うHTMLは最低限、こんな感じ。IE判定のためにJSを利用しているのが特徴ですね。

<body>
<script>
    (function () {
        if(!navigator.userAgent) return false; var ua = navigator.userAgent;
        if(ua.indexOf('MSIE') > -1 || ua.indexOf('Trident') > -1) {
            document.getElementsByTagName("body")[0].className += " IE";
        }
    })();
</script>
<p>Hello World!!</p>
<input placeholder="サンプルテキスト" type="text" value="">
</body>

Excelの入った游ゴシックOFFのMacでメイリオが表示される

私の環境だけかもしれませんが、最新の macOS Sierra にアップデートした際、游ゴシックが標準でOFFになっていました。Qiita の記事ではメイリオのみ指定しており、ヒラギノが指定されていなかったため、Excelの入った私の最新Macでメイリオが表示されました。

ということで、念のためヒラギノ関連も指定しているという経緯になります。やや古いMacだとProNが入っていないっぽいので、念のためProも指定した形としています。

さて、ここで問題になるのは、Windows でヒラギノを表示すると汚い問題。

当然Windowsにヒラギノが入っている場合ヒラギノが表示されます。これが問題！
この環境を使用したことがある人には分かると思いますが、~~とても読めたものではありません。MSゴシックのほうがマシです。~~
昔読みにくいと思ったので、先入観で書きましたが、感覚が変わったのか、何の違和感もありませんでした。（昔から現在の間にApple教に入信しています）
https://qiita.com/RinoTsuka/items/4181efd43d072e246519#%E3%82%88%E3%81%8F%E4%BD%BF%E3%82%8F%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%83%92%E3%83%A9%E3%82%AE%E3%83%8E

私も Windows のヒラギノが薄くて読みにくかった印象があったのですが、改めて仮想環境で確認した感じだと、IE8以下の仕様だったようで、IE9以降はヒラギノも綺麗に表示されていました。念のため WndowsXP に Chrome 入れて確認しても大丈夫でした。

「IE9以上はヒラギノでも問題なし」ですが、私のコードでは全IEにメイリオを指定しているので問題ないと思います（IEの游ゴシック指定は不具合があるので避けました）。

Edge, Firefox だと游ゴシックが少しだけ細い印象になる

Windows の Chrome において、游ゴシックを使うと薄くて読み難い印象になると思いますが、これは冒頭の Qiita の記事で解決します。ただ、Edge や Firefox だと若干薄くて読みにくい印象がありました。まぁ、人によって感じ方は違うかもしれませんけど。

また、私の場合、font-weight で 400 以下は要らないと思ったので、以下のように修正。

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 500;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face{
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 500;
}
@font-face{
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: bold;
}

これで、「Chrome だと少しだけ薄いけど、Edge や Firefox だと読みやすい」游ゴシック体になりました。逆に太すぎる印象なら、上2つの @font-face を消して下さい。

ついでに、Qiitaの記事では Helvetica Neue の太さ調整も行っていますが、これだと Chrome で細いままです。ちゃんとやるなら下2つの @font-face のように、「Original Helvetica Neue」みたいなのを追加する必要があると思います。私は使わないので割合。

ハイコントラストモードがオンのEdgeでメイリオが表示される

「-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由」のまんまですが、このハックを使うとハイコントラストモードがオンの場合のみ Edge が IE 扱いとなり、結果的にメイリオ表示になります。それで問題なければ放置でいいですが…。

私の場合はフォント以外でも一部ハックを使いたかったので、JS で処理しました。

button,input,select,textarea は適用されない

CSS のフォントやテキストの機能は、任意のウィジェットで容易に使用できます (また、フォームウィジェットで @font-face も使用できます)。ただし、ブラウザの動作にしばしば矛盾があります。デフォルトで、一部のブラウザは親から font-family や font-size を継承しません。代わりに多くのブラウザでは、システムのデフォルトの体裁を使用します。
https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms#Fonts_and_text

必要な場合は button,input,select,textarea にもフォントファミリーを指定しましょう。