webフォントとIE6

新しくwordpressのブログをたてることになって、いろいろテーマを物色してみたところ、newsというテーマがなかなかイケてる感じで採用しようと考えた。いろいろ良さげなのだが、ブログタイトルと記事タイトルの日本語文字がぐちゅぐちゅっと圧縮されてしまい、これでは読めない。アルファベットは、ちょっと変わったフォントで表示される。

せっかくの優れものを使わない手はないので、なんとかCSSを軽く修正するだけでカワしたいところだ。IE6のデベロッパーツールで該当の箇所を調べてみると、予想通りfont-familyの問題のようだ。

newsでは、おしゃれなフォントを表示するために、独自のwebフォントを使っているが、当然ながら日本語文字は含まれない。そのため、ブラウザが適当に近しいものを表示してくれるわけだが、残念ながらIE6の表示はうまくなかった。

@font-face句について、いろいろ調べてやってみたのだが、結論からいうと、IEとそれ以外で@font-faceの記述を分けることにした。unicode-rangeで振り分けることもやってみたが、これはうまくいかなかった。ちなみにunicode-rangeの値を記述するところでは、ダブルクォーテーションで囲んだほうがよい。囲まないと意識できないブラウザがあった。

IEとそれ以外を分けるキーは、「*.EOT」ファイルを含めるかどうか。IEの記述にはEOTファイルを記述し、それ以外のブラウザには、woff, truetype, svgのファイルを記述しておく。

ただし、今回は、そもそも日本語が含まれていないことで問題が起きていたので、IEにはlocalフォントのみを指定し、IE以外でwebフォントを指定するようにした。以下に、サンプルコードを載せておく。

/* IE6+ */
@font-face {
  font-family: "LeagueGothicRegular";
  src: local("Meiryo UI"), local("MS UI Gothic");
}
/* Firefox, Opera, Safari */
@font-face {
	font-family: 'LeagueGothicRegular';
	src: local('?'), url('fonts/league_gothic-webfont.woff') format('woff'),
        url('fonts/league_gothic-webfont.ttf') format('truetype'), 
        url('fonts/league_gothic-webfont.svg#webfontteNu5xOa') format('svg');
	font-weight: normal;
	font-style: normal;
}
広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。