Google Web Fontsが汚い時の対処法

Google Web Fonts のじゃぎー

こんにちは、ジャギジャギした事が大嫌い。
まっすぐに生きるSinです。

今ご覧頂いている「Sinack.com」のWordpressテーマにも
Google Web Fontsが使われているのですが、私すごく気になっていることがあったんです。
私は普段Macを使っているのですが、Macのブラウザ(ブラウザの種類は関係なく)では
綺麗に表示されているのですが、サブのWindowsから見ると、汚く表示されていたのです。

これはもうしょうがないモノなのかな。
と思っていたのですが、対処できたので備忘録的に記事を書いてみます。


事の発端

Webサイトを作っている方なら必ずすると思うのですが
色んな環境での確認をしているときです。
冒頭でも書いたのですが、WindowsだとGoogle Web Fontsの表示が汚い。
ひどくジャギっているのです。

まずはこちらをご覧ください

WindowsのChromeから見たGoogle Web Fonts

汚い。

これは、このサイトのContactページなのですが、
「Contact」と書かれているでっかい文字の部分がGoogle Web Fontsです。
分かりますかこのジャギジャギ感!!
俺の名前を言ってみろと言いたくなるレベルでジャギってます。

では次にこちらをご覧ください

MacのChromeから見たGoogle Web Fonts

綺麗

見てくださいこの違い!!!

これはやっぱりちょっと気になります。
ちょっとっていうかすげえ気になります。どうにかしたいです。

実際本当に汚いの?

画像を見てそう思っていませんか?
なんでこのページ上で実際に表示してみるのではなくて画像を貼ったのか。
理由は簡単、Macしかない人等は汚く見えないから分からないからです。

でもやっぱり実際にどうなるのかも見てもらいたい!
というわけで、画像で一応見れない人はカバーしたということで
この下に実際にGoogle Web Fontsを使って文字を表示してみたいと思います。

実際にGoogle Web Fontsを表示してみた例

Jaggy Test Message

どうでしょうか?Windowsでご覧になっている方はブラウザを変えたりして
見てみるとまた違った見え方になるかもしれません。

んで結局どうすりゃいいのよ

私はここで1つの結論に辿り着いたのです。
まずはこちらをご覧ください。

Google Web Fontsを綺麗にしてみた例

Jaggy Test Message

綺麗になったでしょう!!

種明かし

というか、もしかしたらとっくに気づかれてるというか
そんなの常識だろあほかこいつ。と思ってる方がいないか心臓ばくばくなのですが
これ実は、css3のtext-shadowを使っているのです。

text-shadowを使うと言っても、シャドウっすね!!って感じにしたいわけではないので
ものすごーくうっすらとかけます。というかぼかすだけです。

かけ方

text-shadow: 0px 0px 1px rgba(0, 0, 0, .1);

これだけです。

text-shadowプロパティ自体の使い方は
CSS HappyLife ZERO

RGBa値の説明は
HTMLクイックリファレンス

が分かりやすいです。

text-shadowはcss3のプロパティなので
非対応ブラウザには ie-css3.htc あたりを使えばなんとかなるかもしれません。

もっといい方法あるよ!とか
それじゃあだめだろ!っていうご意見ありましたら
真摯に受け止めて反省しますのでお知らせください。

最後まで読んで頂きありがとうございます。
よろしければ右のボタンからフォロー・RSS購読していただけると幸いです。
暇つぶしの相手に最適です。

  • follow me
  • subscribe rss
  • このエントリーをはてなブックマークに追加
  • Pin It

“Google Web Fontsが汚い時の対処法” への1件のコメント

  1. Piyo Hoge より:

    現時点では例として出していただいてるJaggy Text Messageは一応綺麗に表示されている模様ですが・・・面白い解決法だと思います。一部の日本語フォントなどまだ汚いので、見出しなどだったらこれでもおkですね^^。ただ、全文やるとなると重くなりそうです。自前のサイトを日本語のWebフォントで表示したい思っていろいろやっているのですが、Windowsだと綺麗に表示されないケースがよくあって頭が痛い(><)。Chromeが悪いのか日本Microsoftが悪いのか・・・どっちでもいいので、なんとかしてくれ~って感じです。(火狐だと綺麗に出るんだけどなぁ、まあいつも綺麗なPDFクォリティーのMacユーザーにしてみれば、何それ?って問題なのかもしれませんが^^;)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です