投稿者 itouhiro
タグ [ フォント InternetExplorer Firefox ]

Webブラウザのボールド書体をはっきりさせる

Webブラウザのボールド書体(太字)に不満があります。

WindowsVistaの'メイリオ'フォントは標準書体とは別に、太字書体も用意されました。 しかし WindowsXPまでは太字書体がないため、標準書体を変形して作っているので、 区別がつかないことがあります。
もっとはっきり太字とわかるようにしたい。

IE6 change
IE6にこの記事の設定を適用する前(←)と適用後(→)

ブラウザの設定でなんとかします。

フォントを用意

まずは太字フォントを用意します。 今回は Microsoft Office 2003に付属していた 'HGS創英角ゴシックUB' というフォントを使います。

もし Office を持ってない場合は、Googleが無料配布している StarSuite同じようなフォントが入っています。

InternetExplorer6.0 の場合

IE6.0 では [ツール - インターネットオプション - ユーザー補助 - ユーザスタイルシート] に、以下で示すテキストファイルを作って指定します。

@charset "utf-8";
h1,h2,h3,h4,h5,h6,strong,em,b {
  font-family: "HGS創英角ゴシックUB", sans-serif !important;
  font-weight:normal !important;
}

保存するときに文字コードを 'UTF-8' にします。ファイル名はこちらでは user.css にしました。 CSSファイルを置く場所はどこでもいいです。

Notepad
文字コードを 'UTF-8'に指定して保存

CSSファイルを指定したあとで、IEをすべていったん閉じます。そのあとでIEを立ち上げると、ボールド体がまるで雑誌の記事のように目立つようになります。

IE6
ボールド体が立派になった

ただし上記はWindows2000のアンチエイリアスで、背景色によっては太字が少し かすれて見えます。

gdi++を導入すると、なめらかに表示されるようになりました。

IE6 with gdi++
GDI++を使うと見栄えがよくなる

Firefox2.0 の場合

Firefoxの場合は、

C:\Documents and Settings\<Windowsユーザ名>\Application Data\Mozilla\Firefox\Profiles\<適当な文字列>.default\chrome

に以下に示すファイルを作成します。ファイル名は userContent.css とします。

@charset "utf-8";
h1,h2,h3,h4,h5,h6,strong,em,b {
  font-family: "Verdana Bold", "HGS創英角ゴシックUB", sans-serif !important;
  font-weight:normal !important;
}

gdi++も適用したので滑らか表示です。

Firefox2
GDI++を適用したFirefox2

ほかのページでも、この設定は大きな効果を発揮していますよ。

Firefox2
小さな文字にも適用されるため、太字であることがわかりやすい

Opera9.2 のフォント設定については 2007-11-24に書きました。

タグ [ フォント InternetExplorer Firefox ]
固定リンク http://ai11.net/2007/11/30/
ブックマーク はてなブクマ登録 Yahoo!ブクマ登録