2012.12.02
css

改・Webフォントで好きなフォントをブラウザに表示させる

以前の記事は知識不足でした。書き直します。

IEではうまく表示されないことがある…と書きましたが、IEでは拡張子が.ttfや.otfフォーマットのファイルをサポートしていないとのこと。

そして、最近ではwoffというフォーマットのフォントファイルがWebフォントでは主流になってきているとのことです。

Memo:
woffとは、Web Open Font Formatということでウェブ用に作られたフォントファイルです。

ttfファイルをwoffファイルに変換すると、ファイルサイズがかなり小さくなります。

このwoffフォーマット、主要なブラウザの最新版では現時点でサポートされているようです。

しかし、woffに対応してないブラウザもまだあるのでttfも必要なのも事実…。

また、IE8以下はこのttfやotfさえもサポートしていないという現状。
IE8以下はeotフォーマットのみサポートされているとのことです。

今後woffフォーマットが主流になっていくようですが、現時点ではwoff、ttf(またはotf)、eotの3つのフォントファイルを用意していた方が無難だと思います。

CSS記述例

@font-face {
  font-family: 'tare';
  src: url('ファイルのパス/MT_TARE_P.eot?') format('IE'),
       url('ファイルのパス/MT_TARE_P.woff') format('woff'), 
       url('ファイルのパス/MT_TARE_P.ttf') format('truetype');
}
h1 {
  font-family: 'tare';
}

IE用にeotファイルを対応させるには上記のようにファイルのパスの後に?を付け、formatの部分は適当な文字を入れておくようです。今回は単にIEにしました。
このIE用の記述は一番最初に、その後は優先させたい順に記述です。

そしてもちろん、CSSに記述した3種類のファイルをサーバーにアップします。
この場合はMT_TARE_P.eot、MT_TARE_P.woff、MT_TARE_P.ttfの3つです。

ファイルの変換方法

ファイルをwoffに変換する方法は
「@FONT-FACE GENERATOR」のようにオンライン上で変換する方法があります。
ただ、日本語フォントの場合は、ファイルが大きいのでオフラインで(ソフトウェアをダウンロードして)変換したほうが良さそうです。

オフラインですと、

などがあります。

こちらで詳しく説明してくれています。
こちらのサイトも大変参考になりました。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP