2017.11.27

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ゴシックはかからないのでこのようなハックを使います。