WOFFとEOTしかない場合、@ font-faceでサポートしているブラウザーは何ですか?


16

提供されている形式(WOFFおよびEOT)でのみWebで使用できるフォントを購入することを検討しています。

それらがどのブラウザで動作するかわからないし、最新の情報を見つけることができないようです。これら2つだけでどのブラウザをサポートできますか?

私の唯一の経験は、EOT、WOFF、TTF、およびSVGを持つfontspringの構文です。


回答:


23

これは、@ font-face、ハッキングの修正などすべてをロードする標準的な方法です

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

ただし、SVGを削除すると、iOS <5.0のサポートがほぼ完全に失わます

することができます私の使用してのための優れたテーブルあり、一般的にブラウザのサポートを別のEOTのために、別のWOFFを、まだのための別のSVG多くのため、最終的に1 TTF。わかりやすくするために以下に挿入しました。これにより、テストの対象がわかりますが、これは非常に急速に変わることを念頭に置いてください。

wyuによる編集:サポートを並べて表示できるようにテーブルをコンパイルしました

@ font-faceブラウザの一般的なサポート

@ font-faceブラウザの一般的なサポート

EOTブラウザのサポート

EOTブラウザのサポート

WOFFブラウザーのサポート

WOFFブラウザーのサポート

SVGブラウザのサポート

SVGブラウザのサポート

TTFブラウザのサポート

TTFブラウザのサポート


3
eotが.eotと.eot?#iefixの2つの異なる方法で宣言されているのはなぜですか?
サム


2
将来この答えを確認する人のために... Android 4.4以降はWOFFをサポートするようになりましたcaniuse.com/#feat=woff
ozke

3
親愛なる@ozke、私は未来から来ました。この有用な事実を共有してくれてありがとう。また、2015年末までに、サポートwoffされていないAndroidストックブラウザのバージョンの使用がグローバルユーザーの2%未満に減少し、ストックAndroidブラウザがChromeによって食い止められることを知ってください。Android(16%)およびUC(8%)、どちらもサポートしていwoffます。Firefox for Androidも。ただし、その使用率が1%を超えることはありません。あなたは今、私が理解しメーガン・トレイナーことで、10月2014年慣習だった「低音がそれについてのすべて」にリスニングに戻してもよい
user56reinstatemonica8

Webフォントのみが必要ですか?
SuperUberDuper

1

SVGは@ font-faceでどこにも行きません。ただし、EOTはIEでサポートされています。TTFおよびOTFは、他のすべての主要なブラウザーでサポートされています。WOFFに関しては、TTFやOTFと類似しているため、TTFまたはOTFと同じブラウザーでサポートされている可能性が高いです。私の提案は、あなたが本当に興味があるなら、ブラウザで各@ font-face拡張機能を試して、何を取得するかを確認し、W3Cに取得したものを送信して@ font-face記述子の標準ページを更新してください。(現在のところ、「安全な」フォント拡張機能も含まれていません)。

他のすべてが失敗した場合、私はW3Schoolsが最新のものであると確信しています:http : //www.w3schools.com/cssref/css3_pr_font-face_rule.asp


問題は、Safari Mobile 4.1以前ではSVGのみがサポートされていることです。
toomanyairmiles

@toomanyairmilesそのため、最終的には、「デフォルト」の見た目が良くなり、「見る」ことができる人にとっては見た目が良くなります。ほとんどのフォントにはOTF、EOT、およびそれ自体のSVGがないため、100%をカバーできません。
ジェフランゲマイヤー

実際にできます。4種類すべてのフォントを購入するか、無料のフォントを使用して自分でファイルを生成することにより、100%のカバレッジを持つサイトをいくつか構築しました。
-toomanyairmiles

@toomanyairmilesこれは、高速でゆるいタイピングが私を殺す、必要な場所です。常に100%のカバレッジが得られるわけではありません。時々起こりません。カバレッジ率は、必ずしも100%のカバレッジを意味するわけではありません。インターネットユーザーの約40〜50%がまだIE 7以前を使用していますが、そもそもフォントフェイスを十分にサポートしていないため、100%の真のカバレッジを得るには、収益が必要です。 「まとも」に見えるか、少なくとも「ファンシー」フォントの制約内にサイトを保持します。
ジェフランゲマイヤー

まあ、私はそれを小さなサイトや主要なブランドのサイトで試しました。IE6および7で動作するフォントは、最新のブラウザーと同等のレンダリング品質ですか?いいえ、しかしそれはうまく機能します。
-toomanyairmiles

1

Webfontベンダーは、フォントのeotサポートをすぐに提供する必要があります。これは特にこのためです。これは、クラウドベース(包含または除外のオプションを含む)であっても、これが2番目の性質であると考えるでしょう。@ eb_p1


1
待って、なぜ?この質問が最初に尋ねられたとき、EOTは死んでいました、あなたが答えたとき、それは腐った死体でした、そして、今日、私は1年以上の間EOTフォントを見ませんでした。
SilverbackNet 14
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.