HOME   TIPS   IEでWebfontを使う

IEでWebfontを使う

Webフォントは、クライアントのPCにインストールされていないフォントをWebページで自由に使えるようにする技術ですが、IEブラウザだとちょっと厄介です。

@font-face { font-family:+++++; src:url(*****.otf) format("opentype");

使用するフォントファイルをサーバーにアップロードし、cssに上記のように記述します。
あとは、対象のクラスやIDの、font-familyに +++++ のように指定することでほとんどのモダンブラウザではWebFontを表示させることができます。
しかし、InternetExplorerではこれだけでは正常に表示されません。モダンじゃ無いですね。

IEに対応させるためには、http://onlinefontconverter.com/等のサービスを使用して、otfやttfファイルを、Microsoftの規格であるeotファイルに変換する必要があります。

@font-face {
font-family: ****;
src: url('****.otf') format('opentype');
}
/* IE */
@font-face {
font-family: ****;
src: url(****.eot); format("embedded-opentype");
}

eotファイルを作成したらサーバーにアップロードし、cssには上記のように追記します。

ただし、これだけだとFirefoxでは表示されません。
Firefoxに対応させるためには、http://orionevent.comxa.com/等のサービスを使用して、otfを、woffファイルに変換して、サーバーにアップロードします。

font-family:
***;src: url('****.otf') format('opentype'),
url('****.woff') format('woff');

cssでは上記のように記述しますが、今度はIE用のeofファイルも同様に記述しても適用されません。そこで、header内に、IEのみに適用させるための条件分岐タグを追記することにより対応させました。

<!--[if IE ]>
<style type="text/css">
/* IE */
@font-face {font-family: ***;src: url(****.eot?);
format("embedded-opentype");}
</style>
<![endif]-->

つまり、IE、Firefox、Chrome,Safariすべてに対応させるためには、
otf,eof,woffの3種類のフォント形式を用意し、cssはIE条件分岐タグにより読み込ませると確実です。

̃Gg[͂ĂȃubN}[Nɒlj
Õy[W֖߂