font-face src 的可能格式值
P粉447785031
P粉447785031 2023-08-29 15:53:34
0
1
570
<p>如何知道要使用什麼、何時使用、是否真正需要它們? </p> <p>許多網站都有如下範例,但順序不同:</p> <pre class="brush:php;toolbar:false;">@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'); }</pre> <p>但我也看過這樣的例子:</p> <pre class="brush:php;toolbar:false;">@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'); }</pre> <p>有時格式看起來與文件結尾相同,有時文件結尾縮寫或至少部分相同,而其他時候它們似乎完全是隨機字串,或者有時如果只是一個文件,則什麼都不是。 </p>
P粉447785031
P粉447785031

全部回覆(1)
P粉077701708

了解所有可能的格式值並不重要 - 因為其中許多都源自於實驗性瀏覽器實作。

實際上,您可能會將某些格式值與 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');
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!