いまどきのCSS - font-family ゴシック編
CSS の「font-family」の指定に関しては、検索すると2017年版とか2018年版とかたくさん出てきますが、なんとなくコピペではなく、自分で納得がいくように調べてみました。
結論から言うと、「なかなか難しい」です。
適度に見直しが必要だと感じました。
ポイントとしては
・游ゴシックかすれる問題
・ヒラギノ太い問題
があります。
とりあえず今っぽい感じにするならば
Windows
日本語：游ゴシック 英語：Segoe UI
Mac
日本語：游ゴシック 英語：San francisco
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', YuGothic, 'Yu Gothic Medium', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
今っぽい感じです。
Macではヒラギノ優先にしたい場合は
Windows
日本語：游ゴシック 英語：Segoe UI
Mac
日本語：ヒラギノ 英語：San francisco
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', HiraginoCustom, 'Hiragino Kaku Gothic ProN', YuGothic, 'Yu Gothic Medium', Meiryo, sans-serif;ヒラギノはHiraginoCustomとしてfont-faceで太さの調整をします。
これに関しては後述「ヒラギノが太い問題」。
太さはNormalとBoldしか使わないのであれば、San franciscoやSegoe UIもなくてもいいと思います。
Windows
日本語：游ゴシック 英語：Helvetica（Arial）
Mac
日本語：ヒラギノ角ゴシック 英語：Helvetica Neue
font-family: 'Helvetica Neue', 'Helvetica', 'Hiragino Kaku Gothic ProN', YuGothic, 'Yu Gothic Medium', Meiryo, sans-serif;fontに関しての問題。
まずは
游ゴシック問題
游ゴシックはWinやMacでフォント名が違ったり、太さが違ったり色々問題を抱えています。Windows Chromeでかすれて見える問題がありました。
游ゴシックのフォント名はWindowsとMacでそれぞれ
Windows：Yu Gothic
Mac：YuGothic
です。
続いてChromeでかすれる問題
Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？
Windowsで游ゴシックが汚いのは、結局誰が悪いのか？
游ゴシックは何故Windowsでかすれて見えるのか
この解決方法はこれまでは「@font-face」を使用して解決してきましたが、現在はChromeの仕様が変わって解決できません。
かわりに、WindowsではMediumウェイトの游ゴシックのみ使用することにして、
「'Yu Gothic Medium'」
を指定して解決します。
ちなみに、
'游ゴシック Bold'、'Yu Gothic Bold' はWin Chromeでは指定しても表示してくれませんでした（WIn IEはOK）。
ただし、これだとBoldの場合も游ゴシック Mediumを無理やり太くしている状態なので少しにじんで見えます。
なので、気になる場合はBoldの場合はfont-familyを指定し直したほうがいいでしょう。
Boldの游ゴシックのみ@font-faceで指定したいところですが、上記のようにBoldのフォント名はWin Chromeでなぜか動かないので仕方なくクラスを用意するしかないですね。
.bold {
font-family: [フォント名]..., YuGothic, 'Yu Gothic', [フォント名]..., sans-serif;
font-weight: bold;
}とりあえずはこれで游ゴシックはだいたいOK。
ヒラギノが太い問題
ヒラギノはHiragino Sansが登場してからWeightがW1〜W9まで使用可能になりました。これまでのヒラギノは「W3」と「W6」しかなかったために、
Normal：Hiragino Kaku Gothic ProN W3
Bold：Hiragino Kaku Gothic ProN W6
を使用していましたが、Hiraginoi Sansは
Normal：Hiraginoi Sans W4
Bold：Hiraginoi Sans W7
となるので太く見えます。
Boldは結構太く見えます。比べるとだいぶ太くて違和感があります。
Mac OS X El Capitanのヒラギノ角ゴシック
ただし、これは仕様としては正しく（通常、NormalはWeight400、BoldはWeight700）、これまでが400のかわりに300（W3）と700のかわりに600（W6）しかなかったので少し細かったということです。
この問題は、font-weight: bold; を使用せずに、boldの場合はfont-weight: 600; と指定することで回避していたのですが、そうするとWin IE 游ゴシックがMedium扱い（Win Chromeはなぜかbold）、Androidの日本語がNormal扱いになってしまい太く表示されないためNG
なので、@font-faceで調整。
font-weight: bold;はfont-weight: 700;なので、この時にHiraginoSans-W6を指定してあげましょう。
@font-face {
font-family: 'HiraginoCustom';
font-weight: 100;
src: local('HiraginoSans-W1'), local('Hiragino Sans');
}
@font-face {
font-family: 'HiraginoCustom';
font-weight: 200;
src: local('HiraginoSans-W2'), local('Hiragino Sans');
}
@font-face {
font-family: 'HiraginoCustom';
font-weight: 300;
src: local('HiraginoSans-W3'), local('Hiragino Sans');
}
@font-face {
font-family: 'HiraginoCustom';
font-weight: 400;
src: local('HiraginoSans-W3'), local('Hiragino Sans');
}
@font-face {
font-family: 'HiraginoCustom';
font-weight: 500;
src: local('HiraginoSans-W5'), local('Hiragino Sans');
}
@font-face {
font-family: 'HiraginoCustom';
font-weight: 600;
src: local('HiraginoSans-W6'), local('Hiragino Sans');
}
@font-face {
font-family: 'HiraginoCustom';
font-weight: 700;
src: local('HiraginoSans-W6'), local('Hiragino Sans');
}
@font-face {
font-family: 'HiraginoCustom';
font-weight: 800;
src: local('HiraginoSans-W7'), local('Hiragino Sans');
}
@font-face {
font-family: 'HiraginoCustom';
font-weight: 900;
src: local('HiraginoSans-W8'), local('Hiragino Sans');
}なので、ヒラギノ優先させたい場合は一工夫必要です。
ここまでやったけど、色々面倒なので「Noto Sans」使えば？？
WEBフォントを使用すれば、ブラウザの差異を気にせず、共通のフォントが使用できます。
ただ、これも色々と問題があり。。。
例えば
・ロードに時間がかかる？
・自前でサブセット化が必要？
・いやいやGoogleのCDNが結局はいい？
・Noto Sans Japanese、Noto Sans JP、Noto Sans CJK JPどれがいいの？
・Noto Sans JPがwoffを切り捨てたためIE 11で表示できない？
などなど。
これに関しては、次回まとめます。
まとめ
font-familyに関しては随時状況が変わっていくため、注意が必要です。
ですので、一度自分で各ブラウザで実際にどんな表示がされているか、色々なパターンをチェックしてみると、数多くある情報に惑わされなくて済むので、やってみてください。コピペではなくやってみる。
近々、STADでも勉強会の題材として取り上げようと思います。
STADとは↓