SQLの窓

2011年05月11日


WEB フォントの記述方法の考察

WOFF のほうがファイルサイズが小さく制限も無いようです( IE11 でも全ての ttf が表示される事は無い )

変換は、ttf to woff converter

IE9 より WEBフォントに WOFF と TrueType フォントがサポートされますが、IE8 以前でも、Embedded OpenType (EOT) でサポートされていた為、以下のような
記述が利用されているようです。
<style media="screen" type="text/css">
@font-face {
	font-family:"Maskenball04";
	src: url("Maskenball04.eot?") format("eot"),url("Maskenball04.ttf") format("truetype");
}
</style>

この、.eot の ? は、IEのバグのような仕様の為、) 以降の文字列が URL に追加されて呼び出される為、404のエラーになる為このような記述がされています。


※ ですから、実際は # にしたほうがスマートだとは思いますが。


また、format("eot") をつけている理由は、IE 以外で読み込む時に、format("eot") が無いと、使え無いフォーマットなのに読み込んでしまうからです。format("eot") を書く事によって、Firefox 等で、無視するようです。

しかし、IE9 になると、eot も、その他のフォーマットも対応する事になるので、最初に読み込めたファイルが有効になると思われるので、将来的にはあまり良く無い印象をうけます。そこで、どうせ IE だけの都合ですから、以下のように書くといいかもしれません。

2011/5/11 : IE9 で ttf が使えていません。[if lte IE 9] にする必要があります(埋め込み許可ビットというヘッダ情報が必要なようです)
<style media="screen" type="text/css">
@font-face {
	font-family:"Maskenball04";
	src: url("Maskenball04.ttf") format("truetype");
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
@font-face {
	font-family:"Maskenball04";
	src: url("Maskenball04.eot");
}
</style>
<![endif]-->

関連する記事

2014年7月7日現在。WEBフォントの実際

WEB フォントをクロスドメインで利用する




【HTML / CSSの最新記事】
posted by lightbox at 2011-05-11 12:11 | HTML / CSS | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり