web-dev-qa-db-ja.com

なぜフォントフェースにttf、eot、woff、svgなどを含めるべきなのか

CSS​​ font-faceには、ttf、eot、woff、svgおよびcffのように複数のフォントタイプが含まれています。

なぜ我々はこれら全ての型を使うべきなのでしょうか？

それらが異なるブラウザにとって特別なものである場合、なぜそれらの数が主要なWebブラウザの数よりも多いのでしょうか。

css3font-facewebfonts
265
user16948

2019年の答え：

WOFF2、またはレガシーサポートが必要な場合はWOFFのみを使用してください。 他の形式は使用しないでください

（svgとeotはデッドフォーマット、ttfとotfはフルシステムフォントなので、Web目的には使用しないでください）

2012年のオリジナルの回答：

一言で言えば、font-faceは非常に古くなっていますが、最近になってIE以上のものでサポートされるようになりました。

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

  • ttfとotfは普通の古いフォントなので、誰もが無料でライセンスの高いフォントをダウンロードすることができるという意味でイライラする人もいます。

  • 時が経つにつれて、SVG 1.1は純粋にSVGマークアップを使ってフォントをモデル化する方法を説明する「フォント」の章を追加し、人々はそれを使い始めます。時間が経過すると、通常のフォントフォーマットと比べて絶対にひどいことになり、SVG 2ではチャプター全体が再び賢く削除されます。

  • それから、woffはかなりの分野の知識を持つ人々によって発明されます。それはシステムインストールにとって非常に重要であるがウェブには無関係な部分を捨てるような方法でフォントをホストすることを可能にします。また、Webのニーズにより適した内部圧縮を可能にします（ユーザーとホストを幸せにします）。これが優先フォーマットになります。

  • 2019 edit数年後、woff2がドラフトされ承認されました。これにより圧縮率が向上し、単一のファイルを読み込むことができるようになり、ファイルがさらに小さくなります。 20個のスクリプトをサポートするフォントを代わりにディスクに「チャンク」として格納できるようにします。ブラウザでは、フォント全体を前もって転送する必要はなく、必要に応じて自動的にフォントを「分割」できます。植字体験をさらに向上させます。

IE 8以下、iOS 4以下、およびAndroid 4.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 で確認できます。

360
Rich Bradshaw

WoffはTrueType - OpenTypeフォントの圧縮（zip形式）形式です。それは小さく、グラフィックファイルのようにネットワークを介して配信することができます。最も重要なことは、このようにフォントが完全に保存されているということです。彼らはラテン文字だけを使っているので、ほとんどの人が気にしないレンダリングルールテーブルを含みます。

[無効なURLを削除しました]をご覧ください。あなたが見るフォントは複雑な形を作る何千もの組み合わされた文字を持っている実験的なWeb配信のsmartfont（woff）です。基礎となるテキストはローマ字のSinghalaの単純なラテン語コードです。 （メモ帳にコピーして貼り付けてください）。

誰もこのフォントを持っておらず、どこでも見られるので、woffだけがこれを行うことができます（Mac、Win、Linux、さらにはIE以外のすべてのブラウザではスマートフォンでさえIEはOpen Typesを完全にサポートしていません）。

21
user2422970

Brotli圧縮アルゴリズムをベースとしたWOFF 2.0、およびファイルサイズを30％以上削減できるWOFF 1.0を超えるその他の改善に基づくWOFF 2.0は、Chrome、Opera、およびFirefoxでサポートされています。

http://en.wikipedia.org/wiki/Web_Open_Font_Formathttp://en.wikipedia.org/wiki/Brotli

http://sth.name/2014/09/03/Speed-up-webfonts/ 使い方の例があります。

基本的には、srcのURLをwoff2ファイルに追加して、woff2の形式を指定します。 woff-formatの前にこれを持つことが重要です：ブラウザはそれがサポートする最初のフォーマットを使います。

9
Jyrki Alakuijala