爲什麼我們要加載這麼多的字體格式？

典型@字體面設置：爲什麼我們要加載這麼多的字體格式？

@font-face { 
    font-family: 'myFont'; 
    src: url('/fonts/myFont.woff') format('woff'), 
    url('/fonts/myFont.ttf') format('ttf'), 
    url('/fonts/myFont.svg') format('svg'), 
    url('/fonts/myFont.eot') format('eot') 
}

現在，我們有IE 9的這個定義轉換爲「現代瀏覽器」。看着font type support這是一個很大的混亂，雖然似乎是爲IE8。查看網站「我可以使用」woff和svg格式均受所有現代瀏覽器支持。

那麼爲什麼我們添加所有這三種格式，我們只需要一個，因爲所有的現代瀏覽器都支持woff或svg？我不明白的是訂單很重要。所以在上面的例子中，所有現代瀏覽器都會下載「woff」格式。沒有必要添加svg。那麼，爲什麼我們要這樣做呢？

此問題的背景是內聯優化。如果我想將我的字體包含在Base64字符串中，那麼將內聯所有三種字體格式的內容並不是非常「優化」，它只會使CSS不必要地變大。

因此，如果您的目標是「現代瀏覽器」，只需選擇字體支持並堅持的格式即可。忘記網絡上的「每一個例子」都會使用這種後備方式。

也許有些格式在某些瀏覽器中比其他格式更好看，但這並不重要，因爲瀏覽器只會下載第一種受支持的格式，而在「現代瀏覽器」中，格式永遠是您的字體列表中的第一個woff或svg ，或者如果你不關心IE瀏覽器，請點擊ttf。

所以，我剛剛在這裏做了一堆假設。真的有什麼理由要添加它們嗎？你通常使用woff或svg逃脫？

來源

2014-12-13 christianalfoni

沒有現代瀏覽器支持SVG字體。 – 2014-12-13 14:52:18

感謝，更新的問題，雖然它只是不支持它的FireFox。至少由我使用的來源聲明。 – christianalfoni 2014-12-13 14:54:45

來源已過時並且錯誤。 http://blog.chromium.org/2014/08/chrome-38-beta-new-primitives-for-next.html – 2014-12-13 14:56:14

你幾乎自己回答你所有的問題。 :)

這裏有一個良好的閱讀，可以幫助：

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=en

重新SVG字體，我認爲在Safari瀏覽器舊版iOS只支持SVG網絡字體。這就是爲什麼它在食譜中很受歡迎。 EOT是舊的IE。 TTF是非IE前的。這些日子還有woff2，它支持Chrome，Opera和Firefox的非發佈版本。

對於內嵌字體數據，您需要檢測瀏覽器併發送最佳支持版本。

來源

2014-12-16 08:09:41 behdad

呵呵，感謝您的評論和鏈接！這使我平靜下來;-) – christianalfoni 2014-12-16 10:01:47

爲什麼我們要加載這麼多的字體格式？

回答

相關問題