Windowsのブラウザで表示されるフォントを少しだけ綺麗に見せかける方法

2015.5.24 (更新日:2016.03.02)
OLYMPUS DIGITAL CAMERA

メイン機をWindowsに変更したわけですが、一番違和感を感じたのがフォントの汚さ。Macの画面を見慣れてしまうとどうしても気になってしまいます。

メイリオになってかなりよくなって、アプリのメニューなどは違和感を感じないレベルになってきましたが、ブラウザの表示ではやっぱり気になってしまいますね。

そんなわけで、せめて自分のサイトだけでも、もう少しなんとかしようとCSSを弄ってみました。何とかなってるでしょうか?

before after

font_052315_093855_PM

画像だと分かりにくいので、テキストでも。

まずこれが素の状態。

米Amazonではまだ招待制の購入で、しかも米国在住者しか買えないという状態なので、今回は久しぶりにeBayで購入です。

そして弄ったあとの状態。

米Amazonではまだ招待制の購入で、しかも米国在住者しか買えないという状態なので、今回は久しぶりにeBayで購入です。

Macで見ていると微妙な差だと思いますが、Windowsならはっきりと違いが認識できるのではないかと。

CSSで似非アンチエイリアス

やっていることは単純で、CSSで文字にtext-shadowを設定しているだけです。

body {
   text-shadow: 0 0 1px #aaa;
}

という感じ。

text-shadowでフォントの周りをぼかして似非アンチエイリアスを行っているのですね。

参考にしたのは、こちらのサイト。

Webフォントをキレイに見せるテクニックを2つ紹介(Chrome編)

リンク先ではtext-shadowを重ねているのですが、Macでみたときに冗長に見えてしまったので1つだけにしています。

ほかにも「-webkit-text-stroke」でフォントを少しだけ太く見せる方法も紹介されていますが、これもフォントによって周囲の線が目立ってしまうものがあったので見送りです。

正直、自己満足の世界ではありますが、自分のサイトを一番見るのは自分だし、これぐらいならいいかな?

タグ: , ,

この記事が気に入ったらフォロー・購読をお願いします

最新情報をお届けします

News >モバイル

AppleファンはSheepleなのか? 老舗辞書が登録した例文が話題に

英語には「Sheeple」という造語があるそうです。Sheep(羊)とPeeple(人々)の混成語で、「従順で、すぐに人の言いなりになったり、影響を受けやすい人々」というちょっと皮肉を込めた言葉なのですが、このSheep ...

落ち着いた配色がカッコイイ、限定モデルのApple Watch NIKELABを購入

以前から他のスマートウォッチ(Android Wearとか)の比較用に欲しいとは思っていたのものの、なんとなく買いそびれていたApple Watch。そろそろ、安くなってきたSeries 1でも買おうかと思ったのですが、 ...

News >モバイル

HUAWEIとGoogle、Raspberry PiっぽいAndroid向け開発ボードを発表

HUAWEIとGoogleが、Raspberry PiののようなSingle Board Computer(SBC)、HiKey 960を発表しました。 Raspberry Piのようにそれを使ってなにかしらをDIYする ...

News >モバイル

Google、Nexus / Pixelへのセキュリティアップデート提供期限を公開

GoogleのNexusとPixelは、発売から2年間はAndroidのアップデートを提供、3年間はセキュリティアップデートを提供ということになっています。でも実際いつまで?というのはなかなか把握しきれなかったりするもの ...

News >モバイル

任天堂、3D表示のなくなった3DS、new 2DS LLを7月に発売

任天堂がnew 3DS LLから3D機能を取り除いたnew 2DS LLを7月13日に発売すると発表しました。価格は税抜14,980円。 折りたためない廉価版扱いの2DSはすでに発売中ですが、new 2DS LLは通常の ...

MENU

back to top