ホーム > サイト更新(wordpress) > WOFFファイルを生成し設定:WOFFコンバータ:IE9以降、firefoxで使えるWOFF(Webフォント)に変換する

WOFFファイルを生成し設定:WOFFコンバータ:IE9以降、firefoxで使えるWOFF(Webフォント)に変換する

【関連】Webフォントについての記事(タグ:webフォント)

TTFとEOTに続き、WOFFファイルを生成し設定

昨日はTTFとEOTに対応させましたが、今日は、より新しいWebフォント形式であるWOFFにも対応させます。
下記URLを参考にしました。
http://www.adobe.com/jp/devnet/dreamweaver/articles/html5pack_css3_part4.html

<引用>Internet Explorer 8以下に的確にEOTフォントを読み込ませるためには、font-familyプロパティの先頭にEOTフォントへの参照を追加します。この時、拡張子「.eot」の末尾に「?」をつけ、さらにformat()の値に本来指定すべきでない値(なんでもよい)を指定します。今回は「format(‘oldIE’)」としました。末尾の「?」と「format(‘oldIE’)」は、Internet Explorer 8以下でEOTフォントのみを利用させるためのトリックです。

CSSファイルでWOFFを読み込む用に設定する

このサイトでのCSSファイルの設定(現状)

@charset "UTF-8";
 
@font-face
{
font-family: font-r;
 
src: url('webfonts/mplus-1p-regular.eot?') format('oldIE'),
url('webfonts/mplus-1p-regular.woff') format("woff"),
url('webfonts/mplus-1p-regular.ttf') format("truetype");
}
 
@font-face
{
font-family: font-b;
 
src: url('webfonts/mplus-1p-medium.eot?') format('oldIE'),
url('webfonts/mplus-1p-medium.woff') format("woff"),
url('webfonts/mplus-1p-medium.ttf') format("truetype");
}

WOFFを用意する

WOFFコンバータ

IE9以降、firefoxで使えるWOFF(Webフォント)を用意するためのアプリ。
Win・Mac両対応なので試してみました。
このアプリでローカル(PC上の)のTTFファイルを指定して変換すすれば拡張子woffのファイルが生成されます。それを指定の場所にアップロード。

概要

フォントとWOFFの相互変換を行うソフトです。
WOFFはWeb Open Font Formatの略で、Webフォントの1形式です。
変換元のフォントとしては、TrueTypeフォント(拡張子 .ttf)、OpenTypeフォント(拡張子.otf)、Windowsにおけるフォントにリンクする形式の外字ファイル(拡張子.tte、.ote)を指定できます。
WOFFの作成と同時にEOT(Embedded OpenType)ファイルを作成することもできます。ただし、Windos版で作成したEOTファイルは圧縮されていますが、Mac版では圧縮されていません。
WOFFをTrueTypeフォント/OpenTypeフォントに変換することもできます。
本製品はフリーソフトです。
本ソフトはサポート対象外ですので、予めご了承ください。

動作環境

Windows版
Windows 2000/XP/Vista/7 で動作します。

Mac版
Mac OS X 10.4 以降で動作します。(PowerPC と Intel プロセッサの両方に対応した Universal Binaryです。)
ブラウザ

WOFFが使えるブラウザについては対応Webブラウザをご覧ください。

コメント:0

コメントフォーム
入力した情報を記憶する

トラックバック:0

この記事のトラックバック URL
http://www.matrix3dcg.net/archives/799/trackback
トラックバックの送信元リスト
WOFFファイルを生成し設定:WOFFコンバータ:IE9以降、firefoxで使えるWOFF(Webフォント)に変換する - 建築インテリアCGパース・アニメーションムービー制作[matrix3dcg] より

ホーム > サイト更新(wordpress) > WOFFファイルを生成し設定:WOFFコンバータ:IE9以降、firefoxで使えるWOFF(Webフォント)に変換する

ページの上部に戻る