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

基本設定

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


//Windows
font-family: "游ゴシック", "Yu Gothic";

//mac
font-family: "游ゴシック体", YuGothic;

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

Windowsとmacで太さが異なる

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

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

Windows Chromeだと文字が掠れて表示される

WindowsのChrome環境では、游ゴシックのLight/Regularがかすれて表示されてしまう。この差異を抑える手法として、font-weightを500に設定する(それぞれでMediumを適用することができる)方法があるが、これだとmacで若干太く文字が表示される。

ただし、「游ゴシック」が適用されなかった場合の代替フォントを設定する際、500で太字にならないものだけにしなくてはならない点に注意を配らないといけない。それを踏まえた一般的な環境においての一般的な設定方法として以下がある。これは、Windowsは游ゴシック→メイリオ(500でも太字にならない)、macでは游ゴシック→ヒラギノ角ゴ(macのデフォルトフォント。500でも太字にならない)が適用される方法だ。


font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
font-weight: 500;

ただし、500の指定に影響がある書体の指定が必要な場合はこの方法は使えないので、その場合は、もう少し手を入れた以下のような設定もある。ただし、こちらはfont-weight:bold;で文字がにじんだ感じで表示されるリスクがある。


@font-face {
font-family: "Yu Gothic M";
src: local("Yu Gothic Medium");
}
@font-face {
font-family: "Yu Gothic M";
src: local("Yu Gothic Bold");
font-weight: bold;
}
font-family: "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "メイリオ", sans-serif;

※「"游ゴシック Medium"」「"Yu Gothic Medium"」=直接Mediumの太さを指定する方法

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のみに有効なスタイルをセットすることができます。