2012-03-27

Webの表示でMS Pゴシックをメイリオみたいにアンチエイリアスさせる

Windowsの日本語版のフォント(MS PゴシックやMS P明朝)はいまだにギザギザフォントです。
ふとした機会に英語版のWindowsを見ると、きれいになめらかなスムーズフォントでびっくりします(Windows 95の昔から)。
Macユーザには全然ピンとこない話かもしれません。
Windows版のSafariでは独自に対応しています。
Vista以降はメイリオフォントでGUIパーツは多少改善されました。
Webサイトでメイリオを指定しているところはスムーズフォントで表示されます。
ブラウザの表示だけでもなんとかしたいところです。

Webロケッツマガジンのnambaさんが「“MS Pゴシック” をメイリオみたいにアンチエイリアスさせるCSS3ハック」という記事で、とても良いアイデアを提供してくださっています。
私のブログだけでも、スムーズフォントで見ていただきたく、適用しました(すでに適用済みです)。

Blogspot (Blogger)での設定は、[テンプレート] メニュー => [カスタマイズ] => [アドバンス] => [CSSを追加] で、以下を追加します。
body {
/* from idea of Webロケッツマガジン */
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1, 1.01);
-moz-transform-origin: 0 0;
-moz-transform: scale(1, 1.01);
-ms-transform-origin: 0 0;
-ms-transform: scale(1, 1.02); /* IE9だけ1.02 */
-o-transform-origin: 0 0;
-o-transform: scale(1, 1.01);
}
tumblrでは、 [Customize theme] => [Edit HTML] で <style> body {} の中に以下を追加します。
/* from idea of Webロケッツマガジン */
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1, 1.01);
-moz-transform-origin: 0 0;
-moz-transform: scale(1, 1.01);
-ms-transform-origin: 0 0;
-ms-transform: scale(1, 1.02); /* IE9だけ1.02 */
-o-transform-origin: 0 0;
-o-transform: scale(1, 1.01);
 特にtumblrではイタリック体が多用されるので、効果てきめんです。

この方法で1点だけ、注意があります。
文字だけではなく、イメージも1.01倍に変形するので、多少汚く表示されてしまうことです。
設定前のBlogger
設定後のBlogger
設定前のtumblr
設定後のtumblr

No comments:

Post a Comment