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]-->
関連する記事 ２０１４年７月７日現在。WEBフォントの実際 WEB フォントをクロスドメインで利用する
タグ：WEB フォント
|
|
【HTML / CSSの最新記事】
- タイトルの背景画像を CSS でスクロールさせて雪を降らせ、after を使って画像で装飾する
- A 要素と CSS だけでボタンを表現する 『BUTTONS』
- BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』
- CENTER 要素内での position:absolute で、位置指定されていない場合の振る舞い
- INPUT type="number" の振る舞いをブラウザ間で調整する
- META 要素の viewport で content 内の区切り文字に ;(セミコロン) を使うと Google Chrome で警告が出ました。
- CSS の display に 設定する inline-table と inline-block を交互に設定して効果を確認
- ブロックレベル要素内のブロックレベル要素を常に中央に表示する jQuery のデモ
- IE9 以降での完全な「データ URI」の利用 / WEBページにバイナリデータを埋め込む / data Protocol
- CSS で、white-space に pre-line を指定している PRE 要素内の ブラウザ毎の結果の違い
- TABLE要素を使わずに DIV 要素を使って横方向にエリアを配置する
- HTML : 画像を使ったボタンのバリエーション
- Picasa と list-style-image を使って、リストのマークをフォントサイズに合わせて拡大・縮小して利用する
- これがいい方法かどうかは解りませんが、直観的で解りやすい UL 要素内の LI 間の改行調整
- Google Chrome で IFRAME の frameborder="yes" が動作しないのですが(一般仕様はともかくとして)、よくよくブラウザ別に比べるとかなり違います。
- CSS3 の角丸を IE8以前でも使うには( ブログで使うには )
- CSS : display / vertical-align
