Предупреждение о неиспользованной предварительной загрузке Chrome для используемого шрифта значка - PullRequest
Новая
       25

Предупреждение о неиспользованной предварительной загрузке Chrome для используемого шрифта значка

2 голосов
/ 24 апреля 2019

У меня есть значок шрифта, который я предварительно загружаю в Chrome с 

<link rel="preload" as="font" type="font/ttf" href="/static/media/IconFont.ad47b1fb.ttf" crossorigin="anonymous">

и ссылка позже в моем CSS с 

@font-face {
  font-family: "IconFont";
  src: url(/static/media/IconFont.d9fff078.eot);
  src: url(/static/media/IconFont.d9fff078.eot#iefix)
      format("embedded-opentype"),
    url(/static/media/IconFont.ad47b1fb.ttf) format("truetype"),
    url(/static/media/IconFont.c8a8e064.woff) format("woff"),
    url(/static/media/IconFont.979fb19e.svg#IconFont) format("svg");
  font-weight: normal;
  font-style: normal;
}

В течение одной секунды после загрузки страницы я использую кодовую точку Unicode U + E95B со своим значком шрифта.

Тем не менее, я все еще получаю предупреждение от Chrome: 

The resource http://localhost:3000/static/media/IconFont.ad47b1fb.ttf was
preloaded using link preload but not used within a few seconds from the
window's load event. Please make sure it has an appropriate `as` value and
it is preloaded intentionally.

Как мне избавиться от этого предупреждения?

1 Ответ

2 голосов
/ 03 мая 2019

Попробуйте изменить значение rel = "preload" на rel = "prefetch". 

<link rel="prefetch" as="font" type="font/ttf" href="/static/media/IconFont.ad47b1fb.ttf" crossorigin="anonymous">

rel = "prefetch" используется для определенного ресурса, который требуется, но не используется немедленно.Chrome, по-видимому, не регистрирует его использование вовремя и выдает предупреждение, что, я думаю.

Если предварительная выборка не работает, попробуйте rel = "dns-prefetch".rel = "dns-prefetch" говорит браузеру разрешить dns, чтобы при необходимости его можно было быстро загрузить.

Я думаю, что предварительная выборка должна работать, поскольку она фактически запрашивает и загружает ресурс и сохраняет его в кэше для последующего использования, но это не вызывает предупреждение браузера, если он не используется быстро.

[РЕДАКТИРОВАТЬ]
В соответствии с этой страницей этой страницы, сначала загрузите ваш css, также используя предварительную загрузку, затем ваш шрифт, то есть 

  <link rel="preload" as="style" href="[your-css-file-here.css]">
  <link rel="preload" as="font" crossorigin type="font/tff" href="/static/media/IconFont.ad47b1fb.ttf">

И css, ишрифт предварительно загружается, затем страница отображается, поэтому нет необходимости загружать CSS после шрифта.

В вашем CSS-файле добавьте "local ('IconFont')", показанный ниже, полный пример здесь 

src: local('IconFont'),
    url(/static/media/IconFont.ad47b1fb.ttf) format("truetype"),
    url(/static/media/IconFont.ad47b1fb.ttf) format("woff"),
    /* continue your font declaration */

Обо всем, что я могу придумать, чтобы помочь сэтот.Надеюсь это поможет.

...