У меня есть определение шрифта следующим образом:
@font-face {
font-family: "MyCustomWebFont";
src: url('/resources/fonts/MyCustomWebFont-Regular.eot');
src: url('/resources/fonts/MyCustomWebFont-Regular.eot?') format('embedded-opentype'),
url('/resources/fonts/MyCustomWebFont-Regular.otf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: optional;
}
HTML отображается как приложение React. Это создает HTML, как это:
<div class="custom-webfont--bold-normal">The quick brown fox jumps over the lazy dog</div>
Эффективная CSS:
.custom-webfont--bold-normal{
font-size: 20px;
font-style: normal;
font-weight: normal;
font-family: MyCustomWebFont, Arial, sans-serif;
}
Файлы шрифтов, обслуживаемые этими заголовками ответа управления кэшем:
Request URL:http://localhost:8081/resources/fonts/MyCustomWebFont-Regular.otf
Request method: GET
Cache-Control: max-age=31557600
etag: "ede4-56f413908f900"
=============================================== =====
1) Когда я впервые захожу на страницу, убедившись, что кэш чист, я получил:
a) Получены файлы шрифтов с кодом ответа HTTP 200, контроль кэша
max-age = 31557600, заголовок etag установлен правильно.
б) В консоли при активации ошибок CSS я получил сообщение об ошибке:
загружаемый шрифт: время ожидания истекло (семейство шрифтов: "MyCustomWebFont" стиль: нормальный вес: 400 простирание: 100 индекс src: 1) источник: http://localhost:8081/swa-resources/fonts/MyCustomWebFont-regular.otf
c) Пользовательский шрифт не отображается.
Это ожидается. Поскольку веб-шрифт не кэшируется и отображение шрифта является необязательным, что дает шрифт 100 мс для загрузки.
2) Когда я захожу на страницу, во второй раз, убедитесь, что кеш включен. Я получил:
a) Получены файлы шрифтов с кодом ответа HTTP 304, управление кешем
max-age = 31557600, заголовок etag установлен правильно.
b) Запрос выглядит серым на сетевой панели. В переданном столбце отображается текст «кэшировано» . Время блока варьируется от 0 до 200 мс. Время ожидания больше 100 мс. Другие тимины всегда 0 мс.
c) В консоли при активации ошибок CSS я получил сообщение об ошибке:
загружаемый шрифт: время ожидания истекло (семейство шрифтов: "MyCustomWebFont" стиль: нормальный вес: 400 простирание: 100 индекс src: 1) источник: http://localhost:8081/swa-resources/fonts/MyCustomWebFont-regular.otf
d) Пользовательский шрифт не отображается.
Этого не ожидается. Ожидается следующее: поскольку веб-шрифт кэшируется, браузер должен извлекать шрифты из кэша. Не должен подключаться к серверу. Следует использовать шрифты сразу. И шрифт должен быть предоставлен.
======================
Такое неожиданное поведение происходит в Firefox, 58, 59, 60, 61. Chrome работает как положено.