2

Font Awesomeにはさまざまなフォント形式が付属している理由を理解しようとしています。

ダウンサイジングに不要なものを特定したい。これを説明するドキュメントをまだ見つけていません。

ここに画像の説明を入力

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.2.1');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
  font-weight: normal;
  font-style: normal;
}
4

3 に答える 3

6

これらの異なるファイル形式がある理由は、クロスブラウザーの互換性です。フォントファイルの種類はたくさんありますが、最も一般的なものを紹介します。

EOT

Internet ExplorerはIE4 以来、Web フォントのサポートを開拓したと思います。ただし、古いバージョンは.eotファイルのみを受け入れるため、IE<9 をサポートする場合は、それを含める必要があります。ただし.eot、独自のファイル タイプであり、Internet Explorerでのみサポートされており、非常にコンパクトであり、ライセンスなしでの使用を避けるための一種のデジタル著作権保護を備えています (ファイルにはURL バインディングがあり、特定のドメインに関連付けることができます)。

SVG

Safari が Web フォント (バージョン 3) を実装したとき、彼らは を採用することに決め.svg、Opera がそれに続きました。Webkit Chrome であることもサポートしています.svg。ご存じのように、SVG は基本的に XML 形式のグラフィックです。ブラウザーがベクター グラフィックのサポートを開始したかったため、これは便利でしたが、この形式のフォントは非常に大きくなる可能性があるため、最適なソリューションではありません。

TTFとOTF

より一般的.ttfで.otf、最新のすべてのブラウザーでサポートされています。これらの形式はずっと昔からありました。TrueType は 1980 年代にビットマップ フォントをアウトライン形式に置き換えました。OpenType は基本的に、その標準に基づいて、タイポグラフィ機能 (合字、バリエーションなど) を追加して構築されています。これらの機能は本格的な Web タイポグラフィにとって非常に重要ですが、まだサポートの過程にあります。

見る：

WOFF

最後に、.woff基本的に.ttf/.otfは圧縮 (それらよりも ~40% 優れた圧縮率) とメタデータ (ライセンスなど) を追加したものです。これは、Web パフォーマンス (帯域幅の制約) のためにW3C によって Web 用に特別に開発されたもので、驚くほど優れたサポートを備えています。

結論として、それらを CSS に入れなくても数バイト節約できるとは思いません。ブラウザーは、@font-faceプロパティに遭遇したときにダウンロードするフォントをおそらく賢く使います。

参照: @font-face の使用時にブラウザーがダウンロードするフォント

于 2013-10-08T22:10:08.107 に答える