通過「預加載」鏈接僞指令在Chrome中預裝字體

preload指令在Chrome中未按預期運行。以下是可在Chrome中打開的完整HTML頁面，用於比較結果。它應該應用全部5種字體;相反，它只應用第一個預加載的字體，爲第二個應該是假斜體，並簡單地用默認襯線替代剩餘的3.此外，在開發人員的控制檯中， 3秒 - 分別爲五個字體：通過「預加載」鏈接僞指令在Chrome中預裝字體

The resource [URL] was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

奇怪的是，它沒有第一字體（木裏）適用於h1和h2標籤（雖然正在爲h2一個虛假的斜體）;您可以單擊錯誤消息中的URL，預加載的字體的預覽將顯示在開發人員的控制檯中。

任何線索有什麼不好？（我在Windows 8.1 Pro上的Chrome 56上測試過這個）。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Preload Font Test</title> 
    <link rel="preload" href="https://fonts.gstatic.com/s/muli/v10/zscZFkjVRGyfQ_Pw-5exXPesZW2xOQ-xsNqO47m55DA.woff2" as="font" type="font/woff2" crossorigin> 
    <link rel="preload" href="https://fonts.gstatic.com/s/muli/v10/YxNEAWILjDc466nftZdqXuvvDin1pK8aKteLpeZ5c0A.woff2" as="font" type="font/woff2" crossorigin> 
    <link rel="preload" href="https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2" as="font" type="font/woff2" crossorigin> 
    <link rel="preload" href="https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxv79_ZuUxCigM2DespTnFaw.woff2" as="font" type="font/woff2" crossorigin> 
    <link rel="preload" href="https://fonts.gstatic.com/s/lato/v13/tI4j516nok_GrVf4dhunkg.woff2" as="font" type="font/woff2" crossorigin> 
    <style> 
     h1 {font-family:'Muli';font-weight:400;font-style:normal;font-size:1.5em} 
     h2 {font-family:'Muli';font-weight:400;font-style:italic;font-size:1.5em} 
     h3 {font-family:'Open Sans';font-weight:700;font-style:normal;font-size:1.5em} 
     h4 {font-family:'Open Sans';font-weight:700;font-style:italic;font-size:1.5em} 
     h5 {font-family:'Lato';font-weight:900;font-style:normal;font-size:1.5em} 
    </style> 
</head> 
<body> 
    <h1>This should be in Muli regular 400 -- and it is!</h1> 
    <h2>This should be in Muli Italic 400 -- but it's faux Muli Italic :(</h2> 
    <h3>This should be in Open Sans Bold 700 -- but it's the default serif!</h3> 
    <h4>This should be in Open Sans BoldItalic 700 -- but it's the default serif!</h4> 
    <h5>This should be in Lato ExtraBold 900 -- but it's the default serif!</h5> 
</body> 
</html>

來源

2017-03-06 Tom

我找到了解決方案。令人遺憾的是，W3C spec on preload links沒有說清楚，似乎有很多關於這方面的疑問，程序員發佈了關於它的問題，特別是關於開發者的控制檯錯誤消息（谷歌自己看到有多少人正在獲取它會因此而感到困惑;這表明這個非常有用的指令是如何被誤解的）。

您不能使用preload鏈接本身加載字體。它必須與@font-face一起使用。具體而言，preload鏈接必須位於@font-face指令之前，@font-face必須在preload鏈接之後立即發生，如果不立即。看起來在<head>部分，preload鏈接應該在您的鏈接中排在最後，然後@font-face應該緊隨其後，無論是在鏈接的樣式表還是在隨後的<style>部分。

這裏是原代碼的修改後的版本：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Preload Font Test</title> 
    <link rel="preload" href="https://fonts.gstatic.com/s/muli/v10/zscZFkjVRGyfQ_Pw-5exXPesZW2xOQ-xsNqO47m55DA.woff2" as="font" crossorigin> 
    <link rel="preload" href="https://fonts.gstatic.com/s/muli/v10/YxNEAWILjDc466nftZdqXuvvDin1pK8aKteLpeZ5c0A.woff2" as="font" crossorigin> 
    <link rel="preload" href="https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2" as="font" type="font/woff2" crossorigin> 
    <link rel="preload" href="https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxv79_ZuUxCigM2DespTnFaw.woff2" as="font" type="font/woff2" crossorigin> 
    <link rel="preload" href="https://fonts.gstatic.com/s/lato/v13/lEjOv129Q3iN1tuqWOeRBgLUuEpTyoUstqEm5AMlJo4.woff2" as="font" type="font/woff2" crossorigin> 
    <style> 
     @font-face{font-family:'Muli';font-weight:400;font-style:normal;src:url('https://fonts.gstatic.com/s/muli/v10/BkuZCUxEYxRfSu-XBj9_CA.eot');src:url('https://fonts.gstatic.com/s/muli/v10/BkuZCUxEYxRfSu-XBj9_CA.eot?#iefix') format('embedded-opentype'), 
local('Muli Regular'), 
local('Muli-regular'), 
url('https://fonts.gstatic.com/s/muli/v10/zscZFkjVRGyfQ_Pw-5exXPesZW2xOQ-xsNqO47m55DA.woff2') format('woff2'), 
url('https://fonts.gstatic.com/s/muli/v10/minRpKQdEvXRRS8oAbAtWvesZW2xOQ-xsNqO47m55DA.woff') format('woff'), 
url('https://fonts.gstatic.com/s/muli/v10/BfQP1MR3mJNaumtWa4Tizg.ttf') format('truetype'), 
url('https://fonts.gstatic.com/l/font?kit=5laWPvb-IgmGJk9r92y1Hw&skey=2b55aa3f2f059b75&v=v10#Muli') format('svg');} 

@font-face{font-family:'Muli';font-weight:400;font-style:italic;src:url('https://fonts.gstatic.com/s/muli/v10/vurWTAYiHMPVScIey50dUQ.eot');src:url('https://fonts.gstatic.com/s/muli/v10/vurWTAYiHMPVScIey50dUQ.eot?#iefix') format('embedded-opentype'), 
local('Muli Italic'), 
local('Muli-italic'), 
url('https://fonts.gstatic.com/s/muli/v10/YxNEAWILjDc466nftZdqXuvvDin1pK8aKteLpeZ5c0A.woff2') format('woff2'), 
url('https://fonts.gstatic.com/s/muli/v10/DSOyST5zmfghBgRIogdupevvDin1pK8aKteLpeZ5c0A.woff') format('woff'), 
url('https://fonts.gstatic.com/s/muli/v10/AQQ1r0_czneVCtTD9ckSEA.ttf') format('truetype'), 
url('https://fonts.gstatic.com/l/font?kit=Ok1ULmeTg1kfss3jIu3xZQ&skey=f22af9a5d2e9fc47&v=v10#Muli') format('svg');} 

@font-face{font-family:'Open Sans';font-weight:700;font-style:normal; 
src:url('https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzHZ2MAKAc2x4R1uOSeegc5U.eot'); 
src:url('https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzHZ2MAKAc2x4R1uOSeegc5U.eot?#iefix') format('embedded-opentype'), 
local('Open Sans Bold'), 
local('Open-Sans-700'), 
url('https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2') format('woff2'), 
url('https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff') format('woff'), 
url('https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf') format('truetype'), 
url('https://fonts.gstatic.com/l/font?kit=k3k702ZOKiLJc3WVjuplzFlIn5tFQcqMuf-jhyJP0ps&skey=cd9e1a36bb25a3c3&v=v13#OpenSans') format('svg');} 

@font-face{font-family:'Open Sans';font-weight:700;font-style:italic;src:url('https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxrFt29aCHKT7otDW9l62Aag.eot');src:url('https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxrFt29aCHKT7otDW9l62Aag.eot?#iefix') format('embedded-opentype'), 
local('Open Sans Bold Italic'), 
local('Open-Sans-700italic'), 
url('https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxv79_ZuUxCigM2DespTnFaw.woff2') format('woff2'), 
url('https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxhbnBKKEOwRKgsHDreGcocg.woff') format('woff'), 
url('https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxp_TkvowlIOtbR7ePgFOpF4.ttf') format('truetype'), 
url('https://fonts.gstatic.com/l/font?kit=PRmiXeptR36kaC0GEAetxntNmQEE9wZ6UZlmiISB1pg&skey=7e5bb13249e84143&v=v13#OpenSans') format('svg');} 

@font-face{font-family:'Lato';font-weight:900;font-style:normal;src:url('https://fonts.gstatic.com/s/lato/v13/BjDVcwQGWPX2RAidnkd0Bw.eot');src:url('https://fonts.gstatic.com/s/lato/v13/BjDVcwQGWPX2RAidnkd0Bw.eot?#iefix') format('embedded-opentype'), 
local('Lato Black'), 
local('Lato-900'), 
url('https://fonts.gstatic.com/s/lato/v13/lEjOv129Q3iN1tuqWOeRBgLUuEpTyoUstqEm5AMlJo4.woff2') format('woff2'), 
url('https://fonts.gstatic.com/s/lato/v13/G2uphNnNqGFMHLRsO_72ngLUuEpTyoUstqEm5AMlJo4.woff') format('woff'), 
url('https://fonts.gstatic.com/s/lato/v13/4cKlrioa77J2iqTqBgkRWg.ttf') format('truetype'), 
url('https://fonts.gstatic.com/l/font?kit=UxBsysUD4pfKXRb0IKmcRQ&skey=d01acf708cb3b73b&v=v13#Lato') format('svg');} 

     h1 {font-family:'Muli';font-weight:400;font-style:normal;font-size:1.5em} 
     h2 {font-family:'Muli';font-weight:400;font-style:italic;font-size:1.5em} 
     h3 {font-family:'Open Sans';font-weight:700;font-style:normal;font-size:1.5em} 
     h4 {font-family:'Open Sans';font-weight:700;font-style:italic;font-size:1.5em} 
     h5 {font-family:'Lato';font-weight:900;font-style:normal;font-size:1.5em} 

    </style> 
</head> 
<body> 
    <h1>This should be in Muli regular 400 -- and it is!</h1> 
    <h2>This should be in Muli Italic 400 -- and it is!</h2> 
    <h3>This should be in Open Sans Bold 700 -- and it is!</h3> 
    <h4>This should be in Open Sans BoldItalic 700 -- and it is!</h4> 
    <h5>This should be in Lato ExtraBold 900 -- and it is!</h5> 
</body> 
</html>

這個工作，它本身，事實上，收集你的字體作爲關鍵渲染路徑的初始導航，這是主要的一部分效益。目前只有Chrome和Opera支持preload，但其他瀏覽器肯定會遵循。

來源

2017-03-08 22:45:33 Tom

你知道font-face聲明是否可以在樣式表中嗎？即使在上面的鏈接樣式表中（和關於未使用的預加載的Chrome警告），我仍然會得到重複加載 – toxaq

我發現** crossorigin **屬性對於相對路徑是必需的，否則chrome會顯示此警告： was使用鏈接預加載預加載，但在窗口加載事件的幾秒鐘內不使用。請確保它沒有預加載任何東西。 –

通過「預加載」鏈接僞指令在Chrome中預裝字體

回答

相關問題