我真的需要为 FontAwesome 加载所有这些字体类型还是只需要 WOFF2 类型？

Question

我正在查看 FontAwesome path.less，它看起来正在加载一堆相同但类型不同的字体...

/* FONT PATH
 * -------------------------- */

@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
  src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
    url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
    url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
    url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
//  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

Answer 1

这实际上并没有加载所有这些文件类型。浏览器将选择最好的一个并加载该文件。

Woff2 的覆盖率还不够好：http://caniuse.com/#search=woff2。有些人只使用常规 woff，但使用 Font Awesome，您可以免费获得更广泛的覆盖范围。没有理由删除其余部分。

Answer 2

2022 年以后，您可能只需要 woff2 文件。浏览器现在对 woff2 的支持非常好。

Woff2 文件比旧字体类型压缩得更好。 Woff2 字体使用 brotli 作为文件格式的一部分进行压缩。

如果您生成 critical Css，则对其他字体类型的引用可能会在您的 critical css 中占用不必要的 space。

caniuse.com 可以显示浏览器支持。

EOT 适用于 IE8 及以下版本。
TTF 格式由 Microsoft 开发， 80年代的苹果。
WOFF 于 2009 年开发，压缩字体。
WOFF2 提供更小的文件大小和更好的性能现代浏览器。

参考文献：CSS 技巧，caniuse.com，design.tutsplus.com

我真的需要为 FontAwesome 加载所有这些字体类型还是只需要 WOFF2 类型？

Do I really need all these font types loaded for FontAwesome or just the WOFF2 type?

font-awesome

woff2