Mögliche Formatwerte für „font-face src“.

Question

Woher wissen Sie, was Sie wann verwenden sollten und ob Sie sie wirklich benötigen?

Viele Websites haben Beispiele wie dieses, aber in einer anderen Reihenfolge:

@font-face {
  Schriftfamilie: 'Beispiel';
  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');
}

Aber ich habe auch Beispiele wie dieses gesehen:

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

Manchmal sieht das Format genauso aus wie das Ende der Datei, manchmal ist das Ende der Datei abgekürzt oder zumindest teilweise identisch, und manchmal scheinen es völlig zufällige Zeichenfolgen zu sein, oder manchmal gar nichts, wenn es sich nur um eine Datei handelt .

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