日本語のフォント指定、良さそうなものまとめ。
フォント指定時の日本語表記は不要。英語名のみでよい。
2021年最新フォント指定
「游ゴシック」はiOSから見れないので、Macで見た際と印象が変わってしまうため。
また、やはりWindowsの游ゴシック指定は今後の管理が難しい。
body {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
旧:日本語フォント指定
この指定だと、Windowsの游ゴシックかすれる対策ができていない
body {
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", Verdana, Meiryo, sans-serif;
}
Windowsで游ゴシックがかすれる問題の対策(1)
Windowsで游ゴシックを使うと、Reglarが表示されるため、細すぎて文字がかすれてしまいます。
対策するには「游ゴシック Medium」を指定します。
/* 全体 */
body {
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Arial, Meiryo, sans-serif;
}
/* 太字の箇所 */
b, strong, .bold{
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Arial, Meiryo, sans-serif;
}
Windows用英字フォントは、参考ページのVerdanaの代わりにArialを指定しています。
この方法の難点は、太字の箇所は再度font-familyを指定する必要があること。font-familyを指定しないと、Windowsで太字が汚くなってしまいます。
この指定のみだと、IE11では游ゴシック MediumではなくRegularが指定されてしまいます。IE11にも対応するには別途IE用のハックを使い、游ゴシックではなくメイリオを指定します。
※Edgeでは游ゴシック Mediumが指定されます。
※Yu Gothic Medium(font-weight: 500 相当)の指定が将来的に使えなくなる可能性もあるので、Windows版ChromeとEdgeの動向に注意。
【2020年版】游ゴシックを使ったおすすめfont-family指定 | なこラボ
Windowsで游ゴシックがかすれる問題の対策(2)
font-weight:500 を指定する方法です。
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-weight: 500;
Windowsでのヒラギノ角ゴはfont-weightが500で太字になってしまうので注意。
游ゴシック最優先で、游ゴシックがなければ Windowsではメイリオ、 Macではヒラギノ角ゴとなるように指定したのが先ほどの例。
游ゴシックのfont-family指定方法!@font-faceは絶対NG!WindowsのChromeでかすれる問題徹底検証 | WEMO
参考:テーマHabakiriの指定
body {
font-family: "Roboto", "Droid Sans", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
Android の場合は Android 用のフォントを指定していないと丸っこいフォントになってしまうようだったので、Android 用に Roboto と Droid Sans を指定しています。
参考:pixivの指定
「system-ui」を指定すると、WIndows10で游ゴシックが適用されてしまう。
「-apple-system」を指定すると、1px小さい特殊なヒラギノが適用されてしまう。
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}