font-face src 的可能格式值

Question

如何知道使用什么、何时使用以及是否真正需要它们？

许多网站都有如下示例，但顺序不同：

@font-face {
  font-family: 'Example';
  src: url('Example.eot'); 
  src: url('Example.eot?#iefix') format('embedded-opentype'),
       url('Example.woff2') format('woff2'),
       url('Example.woff') format('woff'),
       url('Example.ttf') format('truetype'),
       url('Example.svg#svgExample') format('svg');
}

但我也见过这样的例子：

@font-face {
  font-family: 'Example';
  src: url('Example.woff2') format('woff');
}
@font-face {
  font-family: 'Example';
  src: url('Example.ttf') format('woff2-variations');
}
@font-face {
  font-family: 'Example';
  src: url('Example.otf'); 
}

有时格式看起来与文件结尾相同，有时文件结尾缩写或至少部分相同，而其他时候它们似乎完全是随机字符串，或者有时如果只是一个文件，则什么都不是。

Answer 1

了解所有可能的格式值并不重要 - 因为其中很多都源自实验性浏览器实现。

实际上，您可能会将某些格式值与 CSS 浏览器前缀进行比较 - 幸运的是，它们已经变得不那么相关了 - 不幸的是，它们有时仍然是相关的。

参考您的第一个@font-face示例：

@font-face {
  font-family: 'Example';
  src: url('Example.eot'); 
  src: url('Example.eot?#iefix') format('embedded-opentype'),
       url('Example.woff2') format('woff2'),
       url('Example.woff') format('woff'),
       url('Example.ttf') format('truetype'),
       url('Example.svg#svgExample') format('svg');
}

.otf 格式('opentype')

.otf 实际上丢失了 - 但它与网络使用无关。

src: url("Example.otf") format("opentype");

与 truetype 类似，它们可以本地安装并在任何桌面应用程序中使用。

在字体铸造行话中：OTF 字体文件也称为“后脚本风味”Open Type 字体。
而 .ttf/truetype 字体也称为“Truetype 风味”Open Type 字体。

与 woff2 相比，

.otf 字体缺乏高级文件压缩。

.eot 格式('嵌入式-opentype')

仅由 Internet Explorer 使用 - 但即使这些暴行也至少能够呈现 ttf/truetype。

.eot 已过时
（除非你需要维护一些运行在特殊窗口嵌入式系统上的嵌入式系统）。

.svg 格式('svg')

仅受 webkit 浏览器（safari、epiphany、midori）和 Android 浏览器支持。
然而，所有上述浏览器也支持 woff2、woff 或 truetype。
最重要的是，基于 Chromium/Blink 的浏览器（opera、Vivaldi、Brave、Internet Explorer 13/Edge）或 Firefox 不支持。

不需要 .svg 字体文件（尽管它们可以方便地作为 icomoon 等图标生成器的交换格式）

.ttf 格式('truetype')

可能是受支持最好的字体格式，但不如 woff2 或 woff 那么紧凑。
此外，truetype 字体可以在桌面环境中使用，因此可以在任何应用程序中本地安装和使用。

对于某些用例（例如 pdf 转换）仍然相关。

可变字体

您可能会遇到像这篇文章中这样的旧符号： css 技巧

src: url("Example.woff2") format("woff2 supports variations"),
       url("Example.woff2") format("woff2-variations");

这些额外的格式类型起源于可变字体支持还处于实验阶段的时期。
如今，它们不再需要——只需使用正常的格式标识符即可。

你“可能”也会放弃这种格式

即使没有指定的格式，大多数现代浏览器也可以将字体文件映射到字体系列。
不过，将它们包含在内仍然是一个好主意。

但是：错误的格式值可能会破坏您的 @font-face 规则！

常见错误：

url('Example.ttf') format('ttf') //not correct

而不是

url('Example.ttf') format('truetype') //correct

...不要忘记粗细和样式属性

@font-face {
  font-family: 'Example';
  src: url('Example.woff2') format('woff2'),
       url('Example.woff') format('woff'),
       url('Example.ttf') format('truetype');
       font-weight:400;
       font-style: normal;
       font-stretch: 100%;
}

/* next font style: e.g bold italic condensed */
@font-face {
  font-family: 'Example';
  src: url('Example_boldItalicCn.woff2') format('woff2'),
       url('Example_boldItalicCn.woff') format('woff'),
       url('Example_boldItalicCn.ttf') format('truetype');
       font-weight:700;
       font-style: italic;
       font-stretch: 50%;
}

可变字体@font-face

在本例中，font-weight 和其他属性包含 2 个值来定义范围，例如 font-weight: 100 1000。

@font-face {
  font-family: 'Example;
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 0% 200%;
  src: url(Example.woff2) format('woff2');
}