您真正使用哪些字体扩展名？

Question

在许多项目中，我看到人们使用所有字体扩展名，例如.TTF，.WOFF和.WOFF2。但这会导致许多文件集中到一个源，想象一下我是否有多个不同类型的源？

我只使用.WOFF2，但我注意到在INTERNET EXPLORER和电视的浏览器（例如LG）上，源不起作用。

Answer 1

我将使用 woff2 和 woff 来包含旧版浏览器：

Chrome  Safari  Firefox Opera   IE  Android iOS
5+      5.1+    3.6+    11.50+  9+  4.4+    5.1+

提示！。创建@ font-face规则时–对所有粗细使用相同的FontFamilyName。 它使处理CSS中的变体变得更加容易

@font-face {
  font-family: 'FontFamilyName';
  src:  url('../fonts/FontFileName.woff2') format('woff2'),
        url('../fonts/FontFileName.woff') format('woff');
  font-weight: 400;
}

@font-face {
  font-family: 'FontFamilyName';
  src:  url('../fonts/FontFileName-Bold.woff2') format('woff2'),
        url('../fonts/FontFileName-Bold.woff') format('woff');
  font-weight: 700;
}

确保添加后备（字体堆栈）以支持不支持woff或根本不支持网络字体的浏览器（我不确定LG可以支持

）

h1 { font: 700 2rem 'FontFamilyName', sans-serif; }
p  { font: 400 1rem 'FontFamilyName', sans-serif; }
strong { font-weight: 700; }