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

【求人】株式会社トゥーアールではフロントエンドエンジニアを募集中

このエントリーをはてなブックマークに追加

ネタ元 ： Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い！

ネタ元の記事にはいくつか疑問に思われる点があるので私で調べた内容をまとめておきます。

前置きとしてデバイスフォントの話となり環境によって異なる結果がでる可能性があることを前提に読んでください。

font-familyで「游ゴシック」を指定した場合に採用されるフォント

まずは以下の箇所

そのため、font-familyで「游ゴシック」と指定すると、Macでは「ミディアム」で表示されて綺麗なのに、Windowsでは「細字」で表示されるためにかすれてしまうんです。


WWW WATCHさんで指摘(Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる)されている通りこれが事実ならWindowsのバグです。

以下のようなスタイルを適応して検証してみましょう。(1番目が未指定、2番目が「游ゴシック Light」を指定、3番目が「游ゴシック」を指定、4番目が「游ゴシック」とfont-weightを指定)

<p>あいうえおアイウエオAIUEO</p>
<p class="font1">あいうえおアイウエオAIUEO</p>
<p class="font2">あいうえおアイウエオAIUEO</p>
<p class="font3">あいうえおアイウエオAIUEO</p> 
 
<style>
.font1{
	font-family: "游ゴシック Light", YuGothic;
}
.font2{
	font-family: "游ゴシック", YuGothic;
}
.font3{
	font-family: "游ゴシック", YuGothic;
	font-weight:500;
}
</style>

表示結果は以下のようになります

Windows10（左がChrome、右がIE11）

Windows10でのフォントの見え方

「游ゴシック」を指定した場合明らかに「游ゴシック　Light」より太字の書体「游ゴシック Regular」で表示されます、またfont-weightを指定するとさらに太字の書体「游ゴシック　Medium」で表示されます。

「游ゴシック Regular」が他のシステムフォントより細身のためLight体で表示されるように感じますがちゃんとRegular体で表示されています。

Windows8.1（左がChrome、右がIE11）

Windows8.1でのフォントの見え方

IE11は「游ゴシック　Light」の指定を無視するようです、またfont-weightを指定してもMedium体にはなりません。（Window8.1には「游ゴシック　Medium」がインストールされていないため）

"Hiragino Maru Gothic W4 JIS2004"

ネタ元の記事では「游ゴシック」の指定の前に「Hiragino Maru Gothic W4 JIS2004」という指定を行なっておりこれが更に話をややこしくしている要因です。

以下のスタイルをWindows8.1で確認してみましょう。

.font1{
	font-family: "游ゴシック", YuGothic , sans-serif;
}
.font2{
	font-family: "Hiragino Maru Gothic W4 JIS2004","游ゴシック", YuGothic , sans-serif;
}

以下のように表示されます。(左がChrome、右がIE11)

Windows8.1でのフォントの見え方

IE11で2番目の.font2が太く表示されるのがわかるでしょう。

Windowsではフォントのファミリ名に対する書体数の上限を 4 個までとしているようで「Hiragino Maru Gothic W4 JIS2004」の指定はWindow8.1のIE11では不正な値と扱われます。（参考：CSS Fonts Module Level 3 （日本語訳） - 付録 A： プラットフォームフォントプロパティから CSS プロパティへの対応付け）

結果、直後の指定(「游ゴシック」)が無効化され、sans-serifが採用されてメイリオフォントで描画されるみたいです。(以下のように「游ゴシック」の前に適当なフォントを入れておくと「游ゴシック」で描画されます。)

.font2{
	font-family: "Hiragino Maru Gothic W4 JIS2004","foo","游ゴシック", YuGothic , sans-serif;
}

そのため、ネタ元の筆者のPCでは問題なく表示されたんでしょう(メイリオだし)。

ひとまず、ここらへんが気になった点なので指摘しておきたいと思います。

スポンサードリンク

«Android 4.2のシェアが10%を切った | メイン

このエントリーのトラックバックURL
コメントを投稿