344

CSS3 には、 、 、、など、font-face複数のフォント タイプが含まれています。ttfeotwoffsvgcff

なぜこれらすべてのタイプを使用する必要があるのでしょうか?

それらがさまざまなブラウザーに固有のものである場合、それらの数が主要な Web ブラウザーの数よりも多いのはなぜですか?

4

3 に答える 3

516

2019年の回答:

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

(svgとeotは無効な形式でttfありotf、完全なシステム フォントであり、Web の目的には使用しないでください)

2012年の元の回答：

つまり、font-face は非常に古いものですが、IE 以外でサポートされるようになったのはごく最近のことです。

  • eotIE9 より古い Internet Explorer には必要です - 彼らは仕様を発明しましたが、eot は独自のソリューションでした。

  • ttfとotfは通常の古いフォントであるため、ライセンス料の高いフォントを誰でも無料でダウンロードできることに腹を立てる人もいました。

  • 時が経ち、SVG 1.1 は、純粋に SVG マークアップを使用してフォントをモデル化する方法を説明する「フォント」の章を追加し、人々はそれを使い始めます。さらに時間が経つと、通常のフォント形式に比べてまったくひどいものであることが判明し、SVG 2 は賢明にも章全体を削除します。

  • 次に、woffかなりのドメイン知識を持つ人々によって発明され、システムのインストールにとって非常に重要であるが、Web には関係のないビットを捨てる方法でフォントをホストすることが可能になります (著作権侵害を心配する人々を幸せにします)。 Web のニーズにより適した内部圧縮を可能にします (ユーザーとホストを満足させます)。これが優先フォーマットになります。

  • 2019年編集数年後、woff2草案が作成されて承認され、圧縮が改善され、ファイルがさらに小さくなり、1つのフォントを「部分的に」ロードできるようになり、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');
}

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

于 2012-06-12T18:45:56.360 に答える
22

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

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

誰もこのフォントを持っていませんが、どこでも見られるため、これを行うことができるのは woff だけです (Mac、Win、Linux、さらには IE を除くすべてのブラウザーでスマートフォンでも表示されます。IE は Open Types を完全にサポートしていません)。

于 2013-05-26T19:28:06.237 に答える
14

Brotli 圧縮アルゴリズムに基づく WOFF 2.0 と、ファイル サイズを 30% 以上削減する WOFF 1.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-format の前にこれを指定することが重要です。ブラウザは、サポートする最初の形式を使用します。

于 2014-11-15T11:22:50.743 に答える