Предварительная загрузка font-awesome
Я пытаюсь предварительно загрузить font-awesome, чтобы улучшить время загрузки моей страницы:
<link rel = "preload" as = "style" href = "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link rel = "preload" as = "font" type = "font/woff2" href = "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>
Однако ... Chrome, похоже, загружает шрифт дважды и сообщает
The resource http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0 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.
Как мне заставить это работать?
Ответы 4
Вы необходимо добавить атрибут crossorigin при предварительной загрузке шрифтов.
<link rel = "preload" as = "style" href = "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link rel = "preload" as = "font" type = "font/woff2" crossorigin href = "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>
Я попытался добавить crossorigin = "anonymous" и crossorigin в свою предварительную загрузку <link>, но предупреждение по-прежнему отображается.
Вы используете этот шрифт?
Наряду с пометкой ссылки как таблицы стилей предварительной загрузки с помощью rel = "preload" (что вы уже сделали) нам также необходимо использовать JavaScript для переключения атрибута rel на stylesheet при загрузке файла:
<link rel = "preload" as = "style" href = "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" onload = "this.rel='stylesheet'"/>
<link rel = "preload" as = "font" type = "font/woff2" crossorigin href = "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>Что это значит? Как он отвечает на вопрос? Не просто выпаливайте код. Объяснись! stackoverflow.com/help/how-to-answer
Попробуйте воспользоваться этим методом:
<style>
@font-face {
font-family: 'FontAwesome-swap';
font-display: swap;
src: local('FontAwesome'), url(https:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0) format('woff2');
}
</style>
Хотя ответ, состоящий только из кода, действительно является ответом, небольшое объяснение (почему код OP не работает, какова общая идея вашего кода, важные моменты, предупреждения, ...) может сделать его ответом лучше.
В URL Max CDN есть несколько косых черт. Кроме того, значение swap не рекомендуется при использовании со шрифтами значков, так как в этом случае нет альтернативы.
Я использую несколько версий Font Awesome (обычный, жирный, светлый), поэтому я также использую swap. Если один обычный не загружается, свет будет действовать как запасной вариант.
Он может загружать его дважды из-за порядка, в котором вы выполняете предварительную загрузку.
<link rel = "preload" as = "font" type = "font/woff2" crossorigin href = "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>
<link rel = "preload" as = "style" href = "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" onload = "this.rel='stylesheet'"/>
Предварительно загрузите шрифт, чтобы css @ font-face больше не отправлял запрос на его загрузку.
У меня это не сработало, я должен поместить стиль где-нибудь в папку приложения?