Préchargement de polices dans Chrome avec la directive de lien "précharger"

La directive preload ne fonctionne pas correctement dans Chrome. Vous trouverez ci-dessous une page HTML complète qui peut être ouverte dans Chrome pour la comparaison des résultats. Il devrait appliquer les 5 polices; à la place, il applique uniquement la première police préchargée, fait une fausse italique pour ce qui devrait être la seconde, et remplace simplement le serif par défaut pour les 3 restants.Préchargement de polices dans Chrome avec la directive de lien "précharger"

De plus, dans la console du développeur, ce message apparaît - après environ 3 secondes - pour chacune des cinq polices:

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.

Étrangement, il a fait appliquer la première police (Muli) aux h1 et h2 balises (bien que faire un faux italique pour le h2); vous pouvez cliquer sur les URL dans les messages d'erreur et un aperçu de la police préchargée apparaîtra dans la console du développeur.

Une idée de ce qui ne va pas ici? (J'ai testé cela sur Chrome 56 sous Windows 8.1 Pro.)

<!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>

Source

2017-03-06 Tom

J'ai trouvé la solution. Malheureusement, le W3C spec on preload links ne le précise pas, et il semble y avoir beaucoup de confusion là-dessus où les programmeurs ont posté des questions à ce sujet, en particulier en ce qui concerne le message d'erreur de la console du développeur (Google). elle est perplexe, cela indique à quel point cette directive très utile est mal comprise).

Vous ne pouvez pas utiliser le lien preload seul pour charger les polices. Il doit être utilisé conjointement avec @font-face. Plus précisément, le lien preload doit précéder la directive @font-face et @font-face doit apparaître peu après le lien preload, sinon immédiatement. Il semblerait que dans la section <head>, le lien preload devrait venir en dernier dans vos liens, puis @font-face devrait suivre immédiatement, soit dans une feuille de style liée ou dans une section <style> qui suit.

Voici une version corrigée du code d'origine:

<!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>

Cela fonctionne, et il le fait, en effet, recueillir vos polices dans le cadre de la navigation initiale du chemin de rendu critique, qui est le principal avantage. preload est actuellement uniquement pris en charge par Chrome et Opera, mais d'autres navigateurs suivront sûrement. Savez-vous si la déclaration font-face peut être dans une feuille de style?

Source

2017-03-08 22:45:33 Tom

J'obtiens toujours le chargement dupliqué même quand fait comme ci-dessus dans une feuille de style liée (et l'avertissement de Chrome au préchargement inutilisé) – toxaq

J'ai trouvé que l'attribut ** crossorigin ** est requis même pour les chemins relatifs, sinon chrome montre cet avertissement: was préchargé à l'aide de la précharge du lien, mais non utilisé dans les quelques secondes qui suivent l'événement de chargement de la fenêtre. S'il vous plaît assurez-vous que ce n'était pas préchargé pour rien. –

Préchargement de polices dans Chrome avec la directive de lien "précharger"

Répondre

Questions connexes