Блог

Главная - Вопросы по программированию - Файлы шрифтов отображаются как не найденные на консоли и не отображаются сразу при загрузке страницы

Файлы шрифтов отображаются как не найденные на консоли и не отображаются сразу при загрузке страницы

#php #html #css #wordpress #fonts

#php #HTML #css #wordpress #шрифты

Вопрос:

У меня есть папка fonts, в которую я включил файлы шрифтов в шрифт lemonmilk :

введите описание изображения здесь

На данный момент у меня две проблемы:

  1. После проверки консоли я получаю следующую ошибку 404: /fonts/lemonmilk-medium.woff net::ERR_ABORTED 404 (Not Found)
  2. При загрузке страницы семейство шрифтов загружается не сразу, оно меняется на правильный шрифт после загрузки страницы.

Чтобы решить проблему 2, я попытался добавить font-display и unicode-range , но все еще вижу те же результаты.

Вот как я определил font-face :

 $font-families: (
  'lemonmilk-regular': 'lemonmilk-regular',
  'lemonmilk-light': 'lemonmilk-light',
  'lemonmilk-medium': 'lemonmilk-medium',
  'lemonmilk-bold': 'lemonmilk-bold',
);

@each $key, $val in $font-families {
  @font-face {
    font-family: #{$key};
    src: url('../fonts/#{$val}.eot');
    src:  url('../fonts/#{$val}.eot?#iefix') format('embedded-opentype'),
          url('../fonts/#{$val}.woff') format('woff'),
          url('../fonts/#{$val}.woff2') format('woff2'),
          url('../fonts/#{$val}.ttf') format('truetype'),
          url('../fonts/#{$val}.svg#sansationregular') format('svg');
    font-style: normal;
    font-display: swap;
    unicode-range: U 00-FF;
  }
}

Файлы шрифтов существуют, поэтому я не уверен, почему это выдает мне ошибку 404, и я не уверен, как оптимизировать скорость загрузки шрифта дальше?

Ответ №1:

О путях к файлам HTML

Следующая гипотеза основана на наличии вашего style.css файла в корневом каталоге темы WordPress.

style.css должны находиться в корневом каталоге вашей темы, а не в каталоге CSS. […]

Источник @ https://developer.wordpress.org/themes/basics/organizing-theme-files/#theme-folder-and-file-structure

Ваша проблема, похоже, связана с тем, что вы просите свой css-файл искать ваш шрифт в неправильном каталоге.

Путь к файлу описывает расположение файла в структуре папок веб-сайта.

  • <img src="picture.jpg"> = «picture.jpg » файл находится в той же папке, что и текущая страница.
  • <img src="images/picture.jpg"> = «picture.jpg » файл находится в папке images в текущей папке.
  • <img src="/images/picture.jpg"> = «picture.jpg » файл находится в папке images в корне текущего веб-сайта.
  • <img src="../picture.jpg"> = «picture.jpg » файл находится в папке на один уровень выше текущей папки.

Источник @ https://www.w3schools.com/html/html_filepaths.asp

В настоящее время вы пытаетесь найти свой файл шрифта в «папке на один уровень выше текущей папки» (сценарий 4-го случая). Вам нужно искать свой шрифт «в корне текущего веб-сайта» (сценарий 3-го случая). единственное, что вам, вероятно, нужно сделать, это заменить тире с двойной точкой ../ простым тире / .

  • Правильный путь = url('/fonts/#{$val}.eot'); .
  • Неправильный путь = url('../fonts/#{$val}.eot'); .

Об оптимизации загрузки и рендеринга веб-шрифтов:

1. Браузер начинает анализировать HTML-ответ и создавать DOM.
2. Браузер обнаруживает CSS, JS и другие ресурсы и отправляет запросы.
3. Браузер выполняет разметку и отображает содержимое на экране. После того, как шрифт доступен, браузер рисует текстовые пиксели.
(Это краткая версия того, что происходит)

По умолчанию шрифт отображается только после того, как HTML-код начал анализироваться, и файл css был найден. Мы хотим, чтобы шрифт анализировался одновременно с HTML, для этого нам нужно переместить наш запрос на загрузку шрифта в <head> тег в нашем header.php и попросить наш браузер предварительно загрузить наш шрифт с помощью <link rel="preload"> .

Значение предварительной <link> загрузки атрибута элемента rel позволяет вам объявлять запросы на выборку в HTML <head> -файлах, указывая ресурсы, которые вашей странице понадобятся очень скоро, которые вы хотите начать загружать в начале жизненного цикла страницы, до того, как запустится основной механизм рендеринга браузеров. Это гарантирует, что они будут доступны раньше и с меньшей вероятностью заблокируют отображение страницы, повышая производительность.

Источник @ https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

Наконец, я бы настоятельно рекомендовал использовать CDN и, возможно, библиотеку шрифтов, такую как Google Fonts. Короче говоря, шрифты Google позволяют веб-сайтам совместно использовать шрифты на любых веб-сайтах, используя шрифты Google (миллионы), сохраняя их в браузере пользователя.

если пользователь посещает веб-сайт, вызываемый с website 1 использованием шрифта font 1 , размещенного в Google Fonts, этот пользователь автоматически загрузит его и сохранит. При посещении website 2 using font 1 from Google Font загрузка шрифта будет мгновенной.