« ポスタルコの「超」整理手帳の便利さを再確認。 | メイン | 札幌のTiTOさんに黄色のコンドルがっ。 »

2012-09-29

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

トラックバック

この記事のトラックバックURL:
https://www.typepad.com/services/trackback/6a012877429a4e970c017d3c637566970c

Listed below are links to weblogs that reference Google Chromeのフォント表示をCSSで調整してみました。:

コメント

フィード You can follow this conversation by subscribing to the comment feed for this post.

この記事へのコメントは終了しました。

« ポスタルコの「超」整理手帳の便利さを再確認。 | メイン | 札幌のTiTOさんに黄色のコンドルがっ。 »

ブログ内検索

2018年11 月

        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

カテゴリー

このブログについて

フォトアルバム 「Sai10 Sight」は"私(Sai10=さいとう)の視界(sight)"というつもりで、"サイト サイト"と読みます。 ハンドル名は"shukaku"です。 独自ドメインを設けてありますので、トップページへのリンクは"http://www.sai10.nu/"へお願いします。 メールアドレスはプロフィールのページにあります。

ブログ powered by TypePad
登録年月 10/2005