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