Google Chromeのフォント表示をCSSで調整してみました。

公私共に、WindowsでもMacOSでもLinuxでも、WebブラウザにはGoogle Chrome（Chromium）を愛用しているshukakuです。こんにちは。

先日の更新でVersion 22になってからだと思いますが、Windows7上でMacTypeを併用しても、文字の表示がやや薄い（細い）感じになりました。FirefoxやIEではMacTypeの効果が見えるので、Windows版のChromeで文字の描画に何らかの変更が？

「chrome://flags」で呼び出せる画面で設定を変えると元に戻るのかも知れませんが、Windowsでしか困っていないし、あまり時間も…ということで、CSSで工夫してみました。

設定ファイル「Custom.css」を編集して、下記のようにスタイル指定を追加しました。

* {
    font-family: "Migu 1C";
    text-shadow: 0px 0px 1px #888 !important;
}

要は文字に灰色の影を設定して、ちょっと太く（濃く）見えるようにしたもので、結果は（個人的には）上々でした。太すぎたりぼやけたりすることはなく、十分に見やすくなりました。文字色や背景色に関係なく灰色の影を落としますが、今のところは違和感無し。

「#888」の部分を省略すると、自動的に文字の色で影をつけてくれるのですが、その場合には文字と同じ濃さの色になるため、ちょっと強すぎるのでした。濃さか透明度だけ変えられればいいんですけどね。

ちなみにfont-familyを指定しているのは、Chromeの設定よりWebページでのフォント指定が優先されるのが嬉しくないことがあり、それを更に好みのフォントに変えるための設定。ただ、フォント指定を強制的に変えると、表示が乱れるWebページもあるようなので、「!important」は設定していません。

ついでに、下記の指定も加えてみました。

textarea {
    font-family: "Migu 1M" !important;
    line-height: 120%;
}

これでGmailのメール編集画面など、複数行のテキスト入力の際に等幅フォントを使うようになります。font-familyでのフォント名指定は、好みや環境に応じて変更を。

更についでに下記も追加。（追記：当初は「div.ii.gt.adP.adO div」としていましたが、文中のリンクなどが等幅ではなくなるため、「*」に変更しました。）

div.ii.gt.adP.adO * {
    font-family: "Migu 1M" !important;
    line-height: 130%;
}

これでGmailのメール本文を等幅フォントで表示するようになります。罫線を使ったり、桁位置を縦に揃えたメールもあるので、等幅フォントだとずれなくて見やすくなりますね。

というわけで、機能拡張を追加すれば簡単な工夫だと思いますが、標準の機能でできることはやってみようということで、色々と工夫しております。

なお、Custom.cssの所在は下記の辺り。

• MacOS：/Users/ユーザ名/Library/Application Support/Google/Chrome/Default/User StyleSheets
• Windows7：C:\Users\ユーザ名\AppData\Local\Google\Chrome\User Data\Default\User
  StyleSheets