CSSで游ゴシックやメイリオなどのfont-familyを指定するときのベストプラクティス
長い間、CSSで指定する font-family
は宗教戦争とまではならないとしても、かなり議論されてきました。游書体がWindowsとMacの両方で使えるようになってやっと統一されたかと思ったのですが、色々な問題がありなんだかなぁという感じです。そんな中で実用性のある font-family
を紹介します。
WindowsとMacともに游ゴシック
body {
font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
'Segoe UI', /* Windowsの欧文 */
YuGothicM, /* Windows8.1以上は游ゴシック */
YuGothic, /* Macの游ゴシック */
Meiryo, /* 游ゴシックが入っていないWindows */
sans-serif;
}
/* Windows */
@font-face {
font-family: YuGothicM;
font-weight: normal;
src: local('YuGothic-Medium'), /* Mediumを明示的に指定 */
local('Yu Gothic Medium'), /* Chrome用 */
local('YuGothic-Regular'); /* Windows8.1ではMediumがないのでRegularを指定 */
}
@font-face {
font-family: YuGothicM;
font-weight: bold;
src: local('YoGothic-Bold'), /* Boldはそのまま */
local('Yu Gothic'); /* Chrome用 */
}
Windowsでは游ゴシックが細くかすれてしまうので、@font-fase
で明示的にMediumを指定しています。
IEだけメイリオでそれ以外は游ゴシック
Edgeは大丈夫ですが、IEだけ游ゴシックの下に少し余白が生じる現象が起きます。本文なら問題ないのですが、ボタンのときは下の余白が目立ってしまうのでできれば使いたくありません。下の例では body
に指定していますが、もちろん任意のクラスに適用することもできます。
body {
font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
'Segoe UI', /* Windowsの欧文 */
YuGothicM, /* Windows8.1以上は游ゴシック */
YuGothic, /* Macの游ゴシック */
Meiryo, /* 游ゴシックが入っていないWindows */
sans-serif;
}
/* IE8〜11はメイリオ */
@media screen\0 {
body {
font-family: 'Segoe UI', /* Windowsの欧文 */
Meiryo, /* メイリオ */
sans-serif;
}
}
/* Windows */
@font-face {
font-family: YuGothicM;
font-weight: normal;
src: local('YuGothic-Medium'), /* Mediumを明示的に指定 */
local('Yu Gothic Medium'), /* Chrome用 */
local('YuGothic-Regular'); /* Windows8.1ではMediumがないのでRegularを指定 */
}
@font-face {
font-family: YuGothicM;
font-weight: bold;
src: local('YoGothic-Bold'), /* Boldはそのまま */
local('Yu Gothic'); /* Chrome用 */
}
IE8〜11に適用されるCSSハックを使って、メイリオを指定しています。
WindowsはメイリオでMacはヒラギノ
body {
font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
'Segoe UI', /* Windowsの欧文 */
'Hiragino Kaku Gothic ProN', /* Macのヒラギノ */
Meiryo, /* Windowsのメイリオ */
sans-serif;
}
ヒラギノ→メイリオという順番で指定しますが、このようにするとデザイナーやクリエイターはWindows環境でヒラギノが入っている可能性もあるのでヒラギノが適用されてしまいますが、そういった場合は別に問題ないと思っています。
もし、明確にWindowsではメイリオにしたい場合はJavaScriptでWindows/Macの判定をして、それに応じてCSSを適用すればよいと思いますがそこまでする必要はあるのかなという感じです。
WindowsとMacともに游明朝
body {
font-family: YuMincho, /* Macの游明朝 */
'Yu Mincho', /* Windowsの游明朝 */
'MS Mincho', /* 游明朝がないWindows(MS PMinchoなら字詰めされる) */
serif;
}
Windows8以前では游明朝がないので、MS明朝を指定しています。
IEだけMS明朝でそれ以外は游明朝
body {
font-family: YuMincho, /* Macの游明朝 */
'Yu Mincho', /* Windowsの游明朝 */
'MS Mincho', /* 游明朝がないWindows(MS PMinchoなら字詰めされる) */
serif;
}
/* IE8〜11はMS明朝 */
@media screen\0 {
body {
font-family: 'MS Mincho', sans-serif;
}
}
游ゴシックと同じでIEで下に余白ができるのでMS明朝を指定します。
WindowsはMS明朝でMacはヒラギノ明朝
body {
font-family: 'Hiragino Mincho ProN', /* Macのヒラギノ明朝 */
'MS Mincho', /* WindowsのMS明朝(MS PMinchoなら字詰めされる) */
serif;
}
WindowsのMS明朝やMSゴシックにアンチエイリアスをかける

/* アンチエイリアスを有効にさせたい要素に指定 */
p {
-webkit-transform: rotate(.028deg);
-ms-transform: rotate(.028deg);
transform: rotate(.028deg);
}
transform
でほんの少し回転させるとアンチエイリアスがかかります。游明朝や游ゴシックはもともとアンチエイリアスがかかるのですが、MS明朝やMSゴシックはかからないのでこのようなハックを使います。
CSS本執筆しました!!!
CSS本出します!1/29発売予定
— たかもそ@CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs