IEにも対応したWebフォントの使い方について
CSS3の@font-faceでWebフォントを使う時の書き方と、フォントファイルについてです。IEで対応するには書き方とフォントファイルが独自のものになります。
@font-faceでWebフォントを使う時はフォントファイルをサーバーにアップロードして使います。Google ChromeやFirefox、Safariなどではフォントファイルは一般的なフォントファイル形式の TrueType Font（.ttf） や OpenType Font(.otf) がそのまま使用できますが、IEでは Embedded Open Type（.eot） のファイルでないと使用できません。
Webフォントとして利用できるフォントでも.eot のファイルがない場合があるかと思いますが、そんな時はファイルを変換するWebサービス等を利用して.eot ファイルへ変換できます。
.eot ファイルへの変換方法
ttf2eotを利用する
※追記2015/05/08 現在、ttf2eotはWeb上のサービスではなくなっているようです。下の「WOFFコンバータ」が使い方が簡単です。
ttf2eot は .ttf ファイルを .eot ファイルへ変換するWebサービスです。
使い方も簡単で、”ttf2eot”にアクセスし、フォントファイルを選択して”Convert to .eot”をクリックするだけです。
サクッとファイルの変換ができます。
WOFFコンバータを利用する
WOFFコンバータはフォント形式を変換できるソフトウェアです。Windows用とMac用とあります。
Free Online Font Converter を利用する
.ttfファイルではなく、.otfファイルしかない場合は Free Online Font Converter を利用して .ttfファイルへ変換する事ができます。
Free Online Font Converter は .ttf から .otf 、.otf から .ttf へ変換も出来るWebサービスです。その他にも、pfa, pfb, pt3, sfd, ttf, otf, otb, t42, cef, cff, gsf, ttc, svg, ik, mf, dfont, bin, suit and bd の形式を扱えるようです。
こちらのサイトで .ttf ファイルへ変換し ttf2eot で .eot ファイルに変換して対応できます。
@font-faceの書き方
@font-faceの書き方はIE用の記述も必要になり色々書き方があるようですが、こちらの記事「安全な@font-faceの書き方(抄訳) – Weblog – hail2u.net」を参考にさせて頂き以下のような書き方がいいのかなと思いました。
（※なぜか半角で@fontとするとTwitterの@fontへリンクが自動で貼られてしまう為、以下コードの@を全角にしてあります。コピーする際はあとで＠を半角に直して下さい。）
＠font-face {
font-family: 'Graublau Web';
src: url(GraublauWeb.eot);
// IE用の記述
src: local('Graublau Web Regular'), local('Graublau Web'),
url(GraublauWeb.otf) format('opentype');
// IE以外用の記述。
// ローカルに同じフォントファイルがあればそれを利用する。
}
src: url( )は各フォントファイルへのパスが入ります。
format(‘ ‘)はフォントファイルの形式が入ります。（IE用では必要ありません）
＠font-face をCSSファイルの先頭に記入し、フォントを適用したい箇所へfont-familyの指定をします。
* { font-family: 'Graublau Web'; }
こちらの記事「Webフォントを利用する際に知っておくと役立ちそうなTipsとかサイトいろいろ – かちびと.net」でその他の書き方や、Webフォントのメリット・デメリットやWebフォントをダウンロードできるサイトなどが紹介されています。参考になりました。
サンプルデモとIE表示のキャプチャ
実際に Museo フォントをWebフォントとして使ってみました。サンプルデモのコードは一番下にあります。
サンプルデモ
Museo フォントはフリーでダウンロード可能です。（※登録が必要です）
ダウンロード：Museo™ – Webfont & Desktop font « MyFonts
Museo フォントをダウンロードしたらWebフォント用のファイルが同包されており、 .eot ファイルも入っていました！親切です。
IEでみた場合のキャプチャ
（※クリックで大きい画像がみれます）
IE8での表示
IE7での表示
IE6での表示
サンプルデモのコード
（コピーの際は＠を半角に直して下さい。）
CSSコード
＠font-face {
font-family: 'MuseoSans500Italic';
src: url(MuseoSans_500_Italic-webfont.eot);
src: local('MuseoSans500Italic'), local('MuseoSans500Italic'),
url(MuseoSans_500_Italic-webfont.ttf) format('truetype');
}
html { padding: 0; margin: 0; }
body { padding: 0; margin: 0;
font-family: 'MuseoSans500Italic';
}
h1,p { padding: 20px 0; }
#container{ width: 600px;margin: 0 auto; padding: 0 50px; }
.text{ font-size: 100%; }
HTMLのbody部分コード
<div id="container"> <h1>Webfont-demo｜memocarilog</h1> <p>Museoフォントを使ったWebフォントのデモページです。</p> <img src="lotus.jpg" alt="lotus" width="600" height="399" /> <p class="text"> Lorem ipsum … </p> <p class="text"> Lorem ipsum … </p> <p><a href="https://memocarilog.info/webdesign/4191#sample">元のページへ戻る</a></p>
1 Comments & Tracbacks