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」でフォントを少しだけ太く見せる方法も紹介されていますが、これもフォントによって周囲の線が目立ってしまうものがあったので見送りです。

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

タグ: , ,

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

クアトロガッツの小さいふ「ポキート」の使い勝手が知りたかったので、作ってみた

モバイルプリンスの影響もあって、ずっと気になっていたクアトロガッツの小さいふ「ペケーニョ」。 → クアトロガッツ公式 しかしお札のたたみ方が変則的で、レビュー見ると、端っこが少し折れてしまうらしく「う

イオンモバイルが1周年記念キャンペーンを開始

イオンモバイルがサービス開始1周年を記念して、「ありがとう1周年キャンペーン」を開催しています。 イオンモバイル ありがとう1周年キャンペーン キャンペーン内容としては「抽選で基本料金最大1か月無料」

スマートフォンをPCのキーボードやタッチパッドとして使える「AnyTouch Blue」がKickstarterで出資募集中

スマートフォンをPCのマウスとして使うというものはこれまでもいつくかアプリがリリースされていますが、それらとはちょっと違う感じの製品「AnyTouch Blue」がKickstarterで出資募集中で

XiaomiのCEO、Mi MIXの次期モデルを開発中と公表

Xiaomiが2016年10月末に発表し、世間をあっと言わせたベゼルレス端末Mi MIX。 その後継機の開発(少なくとも検討)が行われていることが明らかになりました。 関連:Xiaomi、6.4インチ

Google Mapがアップデート、リストの共有が可能に

Google Mapがアップデートし、先月からローカルガイド レベル2から利用可能になっていたリスト機能が正式リリースされました。 合わせて、リストの共有機能も追加されています。 関連:近々一般公開さ

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

名前だけは聞いたことはあるものの、使っている、活用しているという話をあまり聞かないMiracast(ミラキャスト)、どんなものかと思って実際に使ってみました。 ...

今更だけど、Xiaomi Mi Pad 2をレビュー メディアプレーヤーとしては良さそう

今更だけど、Xiaomi Mi Pad 2をレビュー メディアプレーヤーとしては良さそう

中国のECサイト、GearBestからXiaomi Mi Pad 2を提供頂きました。 Mi Pad 2にはWindows 10モデルもありますが、今回のはAndroid版、RAM2GB ROM1...

HUAWEI P9よりもおススメ! honor 8の詳細レビュー

HUAWEI P9よりもおススメ! honor 8の詳細レビュー

上位機種のHUAWEI P9と同等のスペックを持つhonor 8の詳細レビュー。HUAWEI P9やASUS ZenFone 3と比較しながら紹介します。...

クアトロガッツの小さいふ「ポキート」の使い勝手が知りたかったので、作ってみた

クアトロガッツの小さいふ「ポキート」の使い勝手が知りたかったので、作ってみた

モバイルプリンスの影響もあって、ずっと気になっていたクアトロガッツの小さいふ「ペケーニョ」。 → クアトロガッツ公式 しかしお札のたたみ方が変則的で、レビュー見ると、端っこが少し折れてしまうら...

「HUAWEI P9」と「HUAWEI P9 lite」どちらを買うか悩んでいる人のためスペックを比較

「HUAWEI P9」と「HUAWEI P9 lite」どちらを買うか悩んでいる人のためスペックを比較

HUAWEI P9とP9 lite、どちらを購入するか悩んでいる人のために、スペック比較と選ぶためのポイントになりそうな箇所をピックアップしてみました。...

MENU

back to top