フォントフェイスにttf、eot、woff、svgなどを含める必要があるのはなぜですか

299

ではCSS3 font-face、同様に含まれる複数のフォントの種類があるttf、eot、woff、svgとはcff。

これらのタイプをすべて使用する必要があるのはなぜですか？

それらが異なるブラウザーに特別である場合、それらの数が主要なWebブラウザーの数より多いのはなぜですか？

css font-face webfonts

— user16948
ソース

回答:

425

2019年の回答：

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

（svgおよびeotは無効な形式でttfありotf、完全なシステムフォントであり、Webの目的で使用しないでください）

2012年の元の回答：

要するに、font-faceは非常に古いものですが、最近サポートされたのはIEだけではありません。

eot IE9より古いInternet Explorerには必要です-彼らは仕様を発明しましたが、eotは独自のソリューションでした。
ttfとotf通常の古いフォントなので、高価なライセンスのフォントをだれでも無料でダウンロードできることをイライラする人もいました。
時が経つにつれて、SVG 1.1は、純粋にSVGマークアップを使用してフォントをモデル化する方法を説明する「フォント」の章を追加し、人々はそれを使い始めます。さらに時間が経過すると、通常のフォント形式に比べて絶対にひどいことがわかり、SVG 2は章全体を賢明に削除します。
次に、woffかなりのドメイン知識を持つ人々によって発明されます。これにより、システムのインストールには非常に重要であるが、Webには無関係である（著作権侵害を心配するようになる）ビットを捨てる方法でフォントをホストできます。 Webのニーズに合わせて内部圧縮を可能にします（ユーザーとホストを幸せにします）。これが推奨フォーマットになります。
2019年の編集数年後、woff2ドラフトが作成されて受け入れられ、圧縮が改善されてファイルがさらに小さくなり、20個のスクリプトをサポートするフォントを「チャンク」として保存できるように、「部分的に」単一のフォントをロードできるようになりました。「代わりにディスク上。ブラウザはフォント全体を事前に転送する必要がなく、必要に応じて自動的に「部分的に」フォントをロードできるため、組版エクスペリエンスがさらに向上します。

IE 8以下、iOS 4以下、およびandroid 4.3以前をサポートしたくない場合は、WOFF（およびWOFF2（より高度に圧縮されたWOFF）をサポートする最新のブラウザーで使用できます）。

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

サポートはhttp://caniuse.com/woffwoffで確認できます
サポートはhttp://caniuse.com/woff2woff2で確認できます

— リッチブラッドショー
ソース

iOS 5はWOFFをサポートしています。

— Rob

woff...フォントの著作権侵害を防止するモードがありますか？いったいどのように機能するのでしょうか？

— マークアメリー2013年

TTFはWOFFよりも軽量であってはなりません。WOFFは、TrueType-OpenTypeフォント（ttfおよびotf）の圧縮形式です。

— toto_tico 2014年

WOFFのポイントは海賊版対策ではありません。TypeKit氏は、「TrueTypeフォントに対するOpenType / CFFフォントの2つの主な利点は、1）ファイルサイズが小さいことと、2）何らかの形式のアンチエイリアスが可能な環境で適切にレンダリングするために必要なヒント情報がはるかに少ないことです。」

— Michael McGinnis 14

@Zelphirツールを使用すると、そのフラグを使用して埋め込み可能なフォントを作成するのが難しくなります。また、デザイナーはプログラミングの知識がなく、光沢のある「海賊フォント」ボタンを備えたMacアプリを設計した場合にのみフラグを削除できます。また、法人の場合は法的責任を問われることがあります。彼らがブログを持っている人であるなら、彼らに話しかけ、失敗し、彼らのホストなど-しかし、あなたのフォントを購入できない人々はとにかく潜在的なコスチューマーではないので、無料の宣伝はもっと価値があると思いますdafontの最も近いものと交換するだけで納得させる手間よりも。

— Camilo Martin

Woffは、TrueType-OpenTypeフォントの圧縮（zip形式）フォームです。小さく、グラフィックファイルのようにネットワーク経由で配信できます。最も重要なのは、この方法でフォントが完全に保持されることです。ラテン語のスクリプトしか使用しないため、ほとんどの人が気にしないレンダリングルールテーブルも含まれます。

[デッドURLが削除されました]をご覧ください。表示されるフォントは、実験的なWeb配信のスマートフォント（woff）であり、複雑な形状を作る何千もの文字が組み合わされています。基礎となるテキストは、ローマ字化されたシンハラ語の単純なラテン語コードです。（メモ帳にコピーアンドペーストして参照してください）。

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

— user2422970
ソース

そのウェブサイトには特別なものは何もありません。エディターにコピーした場合（utf8をサポートしています）、通常のテキストしか表示されません。woffが正確に行うことは何ですか？

— Zelphir Kaltstahl 2015年

この回答の3分の2は間違っているか、無関係です。また、そのリンクは壊れています。

— Yay295 16

Brotli圧縮アルゴリズムに基づくWOFF 2.0と、ファイルサイズを30％以上削減するWOFF 1.0に対するその他の改良点に基づくWOFF 2.0は、Chrome、Opera、Firefoxでサポートされています。

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

http://sth.name/2014/09/03/Speed-up-webfonts/には、その使用方法の例があります。

基本的には、src urlをwoff2ファイルに追加し、woff2形式を指定します。これをwoff形式の前に置くことが重要です。ブラウザーは、サポートする最初の形式を使用します。

— ジルキ・アラクイジャラ
ソース