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

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; }