[解決済み] なぜフォントフェイスにttf, eot, woff, svg,...を含める必要があるのでしょうか？

質問

で CSS3 font-face のように、複数のフォントタイプが含まれています。 ttf , eot , woff , svg と cff .

なぜ、これらの型をすべて使わなければならないのでしょうか？

ブラウザによって特殊なら、なぜその数は主要なウェブブラウザの数より多いのでしょうか？

解決方法は？

2019年に回答します。

WOFF2のみ、またはレガシー対応が必要な場合はWOFFを使用します。 その他の形式は使用しないでください

( svg と eot はデッドフォーマットです。 ttf と otf はフルシステムフォントであり、ウェブ用に使用するべきではありません)

2012年当時のオリジナル回答です。

要するに、font-faceは非常に古いものですが、最近になってIE以上に対応したのです。

• eot は IE9 より古い Internet Explorer に必要です。彼らは仕様を考案しましたが、eot は独自の解決策でした。

• ttf と otf は普通の古いフォントなので、高価でライセンスが必要なフォントを誰でも無料でダウンロードできることを意味すると、一部の人々は苛立ちました。

• 時が経ち、SVG 1.1には"fonts"の章が追加され、SVGマークアップを使って純粋にフォントをモデル化する方法を説明し、人々がそれを使うようになりました。さらに時間が経つと、それらは まったくもってひどい 通常のフォント形式と比較して、SVG 2は賢明にも、その章全体を再び削除しました。

• では。 woff これは、システムのインストールには決定的に重要だがウェブには無関係なビットを捨て、ウェブのニーズにより適した内部圧縮を可能にする方法でフォントをホストすることを可能にします (海賊版を心配する人々を幸せにします)。これが望ましい形式となる。

• 2019年版編集 数年後 woff2 この機能により、20のスクリプトをサポートするフォントをディスクにquot;チャンクとして保存することができ、ブラウザは必要に応じて自動的にフォントをquot;インパーツで読み込むことができるため、フォント全体を転送する必要がなくなり、タイプセットの操作性をさらに向上させることができます。

IE8以下、iOS4以下、android4.3以前に対応したくない場合は、WOFF(対応する最新ブラウザでは、より高圧縮なWOFFであるWOFF2)を使えばいいのです。

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

をサポートします。 woff で確認することができます。 http://caniuse.com/woff
をサポートします。 woff2 で確認することができます。 http://caniuse.com/woff2