「游明朝」は、Windowsは8.1、macは10.9から標準搭載されているウェブ製作サイドにとってはとても貴重な日本語フォント...のはずだったが、以下のような問題が存在する。

基本設定

同じ「游ゴシック」でも、Windowsとmacで指定方法(というか名前)が異なる。


//Windows
font-family: "游明朝", "Yu Mincho";

//mac
font-family: "游明朝体", YuMincho;

これを踏まえて以降の問題へ。

Windowsとmacで太さが異なる

Windowsとmacで同じ「游ゴシック」を搭載してはいるが、それぞれで採用しているウェイトが異なるため、注意が必要。

WindowsはLight/Regular/DemiBoldの3ウェイト、macはMedium/DemiBoldの2ウェイトがある。ウェイトを指定しないで書体のみをCSS等で設定した場合、WindowsはRegularが適用され、macではMediumが適用されるので、macのほうが文字が太く表示される。

Android、iOSで使える明朝フォントを考える必要がある

iOSなら、「ヒラギノ明朝 ProN W3(HiraMinProN-W3)」「ヒラギノ明朝 ProN W6(HiraMinProN-W6)」が標準インストールされているので、これらを適用すればいいが、Androidには明朝体が標準では用意されていないため、Google Fontsなどでの対応が必要。

IEで文字の下に余白が出来てしまう

Windows IEで「游明朝」を表示させると、なぜか文字下に謎の余白が出来る。段落などでは全く気にならないが、ボタンなどでは文字が少し上にズレて表示されてしまったような感じになる。これを解消する方法はないので、IEだけハックでpaddingを設定して見た目を調整する(もしくはフォント自体を変更する)。以下はIE10以降のハック。


@media all and (-ms-high-contrast: none) {
 .btn {
  padding-bottom: 2px;
 }
}

または


_:-ms-input-placeholder, :root .btn {
  padding-bottom: 2px;
}

とCSSに記述することで、IEだった場合のみIEのみに有効なスタイルをセットすることができます。