Hatena::ブログ(Diary)

Webデザインの日々日記 RSSフィード

2016-07-06

Windows游ゴシックがかすれる問題対策

少し前に話題になったWindowsの游ゴシック、游明朝が汚い(かすれる)という問題について、表示をまともにするための方法を検討することにしました。

これまでの経緯

no title

no title

Re : Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い! - to-R

表示検証

環境

今回は游ゴシック体のみで確認。

OSWindows10

font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", sans-serif;

font-size: 16px;

結果

ブラウザは左からchrome, Firefox, Edge, IE11

※コメントからの指摘で気づきましたが、以下のスクリーンショットではchromeの欧文書体が游ゴシック以外のものになってます。指摘後、"游ゴシック"のみの指定して、また元に戻したら欧文フォントも游ゴシックになったので何でこんなことになったのかさっぱり分かりません。スクリーンショット撮り直すのも面倒なんでこのままにしときます。

1.特に何も指定しない場合

f:id:k3akinori:20160706181734p:image

2.font-weight: 500; を適用した場合

f:id:k3akinori:20160706181735p:image

chromeの表示がましになる一方、他のブラウザのフォントも濃くなりました。

3.font-weight: normal; color: #000; text-shadow: 0px 0px 0px #000; を指定した場合

f:id:k3akinori:20160706181736p:image

chromeは細さそのままで色が濃くなり、Firefoxはfont-weight: 500;とほぼ変わらず。Edge, IE11ではジャギーが発生して汚くなりました。(Wの斜め線で顕著にみられます)

4.font-weight: normal; color: #333; text-shadow: 0px 0px 0px #666; を指定。IEのジャギーがごまかせないか試してみました。

f:id:k3akinori:20160706181737p:image

成果はあまり芳しくありません。

結論

今回の問題は、Windowsの問題という面もありますが、それ以上にChromeのレンダリングが下手くそという面も大きいのではないかと思います。Chromeがノーマルで游ゴシックLightを使う問題(バグ?)ということかと思います。(コメントを受け修正)

text-shadowで濃くするのも一定の効果はありますが、今度はIEがshadowのレンダリングが苦手、ということが分かりました。

すべての条件下できれいに描画したのはFirefoxで、さすが、Mosaic系譜といったところでしょうか。

追記:現時点の対策法

問題がWindows chromeに限定されていて、それはfont-weight: 500;で解消されることまでは間違いないので、JavaScriptを使ってUAを判別し、chrome専用のCSSを読み込ませて解決することにしました。

<head>内に以下を記述

<script>
 var ua = window.navigator.userAgent.toLowerCase();
 if (ua.indexOf("chrome") != -1){
    document.write('<link rel="stylesheet" type="text/css" href="chrome.css" />');
 }
</script>

chrome.cssに以下を記述

html {
	font-weight: 500;
}

母親と子母親と子 2016/07/07 00:01 「Chromeのレンダリングが下手くそ」というのがよくわからん。文章中でもChromeが他のブラウザより悪いとは書いてないし、画像を比べてもどれもほとんど変わらず汚い。Chromeでウェイト指定なしだと游ゴシックLightを使うから細く見えるのなら、Mac上でヒラギノゴシック W3はLight相当なのだから上の理屈から細く見えて然るべきだが実際そうは言われないのはなぜか。MacのChromeで游ゴシックを使っても文字がかすれたりはしない。Windows版ChromeがそのフォントレンダリングにDirectWriteを使ってることを考えるとWindowsがすべての原因なのでは。余談だけどChromeの画像だけgが二階建てであるなど欧文の書体が違うよね。

k3akinorik3akinori 2016/07/07 07:59 > 余談だけどChromeの画像だけgが二階建てであるなど欧文の書体が違うよね。
あホントだ。違うのが効いているのか。フォント指定をシンプルにしてもう一度検証してみるわ。ご指摘感謝。

> 画像を比べてもどれもほとんど変わらず
縮小されてるせいで確かによく分からんね。クリックして元画像を見ると違いが分かるよ。

> ChromeがそのフォントレンダリングにDirectWriteを使ってることを考えるとWindowsがすべての原因なのでは。
なるほど。ChromeはレンダリングをOS任せにしているのか。レンダリングが下手くそではなく、使うフォントを間違って投げてるバグというべきなのかも。

投稿したコメントは管理者が承認するまで公開されません。

トラックバック - http://d.hatena.ne.jp/k3akinori/20160706/1467806334