Windows10環境でも游フォント（YuGothic）を綺麗に表示するCSS
CSSで游フォント（YuGothic）を指定していると、Windows10環境で文字がかすれたように汚く見えてしまう場合があります。
以下のようにCSSを設定することでWindows/Macどちらの環境下でもミディアム（中）で表示されるため擦れることがなくなります。
@font-face {font-family: "YuGothic M";src: local(Yu Gothic Medium)}
body {
font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "YuGothic M",
"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
font-weight:normal;
}
上記のようにフォントを指定しておくことで、どのような環境下でほぼ問題なく美しく表示されると思います。
「font-weight: 500;」と指定することで解決する方法もあるようですが、将来のメンテナンス性なども考慮して上記の方法を選択しました。
上記CSSを検討するにあたっては、下記のサイト/記事を参考にさせて頂きました。
@font-faceはWebフォントを指定するときなどで使うもので、 （中略） この機能を使って游ゴシックMediumを直接指定したオリジナルフォントを作ってしまおうとうことなのです。
Windowsの游ゴシックをfont-weightを使わずにMacに合わせる方法
Macに搭載されている游ゴシックは「ミディアム」「ボールド」なのに対し、Windowsに搭載されているのは「細字」「標準」「中」「太字」（「中」は、Windows10から搭載）。 そのため、font-familyで「游ゴシック」と指定すると、Macでは「ミディアム」で表示されて綺麗なのに、Windowsでは「細字」で表示されるためにかすれてしまうんです。
Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？
問題がWindows chromeに限定されていて、それはfont-weight: 500;で解消されることまでは間違いない
Windows游ゴシックがかすれる問題対策
ところが、font-weight:500にするとMac系だと太文字扱いになってしまいました。
CSSの游ゴシックで右往左往した話
Mac OS 10.9とWindows 8.1から游書体が標準搭載されている。 とはいっても、今までどおりヒラギノとメイリオでいいやと思っていた。 しかし、見比べてみたら游ゴシックが思った以上にキレイ！
游ゴシックとヒラギノとメイリオの見比べた結果、font-familyには游ゴシックを指定したい
PCのWindowsとMacで出来るだけ見栄えを同じにしたいので、游書体（「游ゴシック」「游明朝」）を最優先で指定した。
2016年の日本語フォントファミリー指定はこれで行く【比較画像付】
「ＭＳ Ｐゴシック」は指定しなくても必要なときには出るので記述しない
適切なフォントファミリー
疑問3：Osakaの記述は、今でも必要でしょうか。 さすがに、その必要はないのではありませんか。
CSSでのフォント指定について考える
情報に誤りがあった場合のご指摘、Dolce & Vivaceへのご意見ご感想は、
お問い合わせフォーム
や
Twitter(@DolceVivace_Web)
よりご連絡をお願い致します。
このトピックが気に入ったら「いいね」やツイッターでシェアして下さいね！
