Предварительная загрузка шрифтов в Chrome с помощью директивы "preload" link
на preload директива не выполняется в Chrome, как ожидалось. Ниже приведена полная HTML-страница, которая может быть открыта в Chrome для сравнения результатов. Он должен применять все 5 шрифтов; вместо этого он применяет только первый предварительно загруженный шрифт, делает искусственный курсив для того, что должно быть вторым, и просто заменяет засечку по умолчанию для оставшихся 3.
кроме того, в консоли разработчика это сообщение появляется-примерно через 3 секунды-для каждого из пяти шрифты:
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.
как ни странно, он применил первый шрифт (Muli) к h1 и h2 теги (хотя делает искусственный курсив для h2); вы можете нажать на URL-адреса в сообщениях об ошибках и предустановленной шрифт будет отображаться в консоли разработчика.
есть идеи, что здесь не так? (Я тестировал это на Chrome 56 В 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>
1 ответов
я нашел решение этой проблемы. К сожалению,спецификация W3C на preload ссылки не делает это ясным, и, похоже, есть много путаницы в этом, где программисты разместили вопросы об этом, особенно в отношении сообщения об ошибке консоли разработчика (Google, который сам по себе, чтобы увидеть, сколько людей получают его и озадачены им; это указывает на то, насколько неправильно понята эта очень полезная директива).
вы не может использовать preload ссылка сама по себе для загрузки шрифтов. Он должен использоваться совместно с @font-face. В частности,preload ссылка должна предшествовать и @font-face должно произойти вскоре после preload ссылку, если не сразу. Казалось бы, в на 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>
это работает, и на самом деле он собирает ваши шрифты как часть начальной навигации критического пути рендеринга, что является основным преимуществом. preload в настоящее время поддерживается только Chrome и Opera, но другие браузеры, безусловно, последуют.