Почему Firefox повторно запрашивает шрифты при изменении размера страницы?

Ответ 1

Я столкнулся с той же проблемой перезагрузки шрифтов в Firefox при каждом изменении размера окна браузера. Оказывается, это связано с указанием шрифтов local(), которые не были установлены локально, перед тем, как указать шрифты url().

Если я использую следующий css:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url("../fonts/Roboto-Regular.woff2") format('woff2'), url("../fonts/Roboto-Regular.ttf") format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

поведение появляется в Firefox, если у меня нет локального локального Roboto-Regular, если я устанавливаю локально локально Roboto-Regular, проблема исчезает. Поскольку я не ожидаю, что у всех будет установлен Roboto-Regular локально, я удалил ссылки на шрифты local() из тега @font-face src.

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Roboto-Regular.woff2") format('woff2'), url("../fonts/Roboto-Regular.ttf") format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Это исправляет это для меня. Больше не требуется перезагрузка ненужных шрифтов при каждом изменении размера окна браузера.

Ответ 2

Принимая удар, но с FF вы получаете тонну настройки (esp, если вы используете аддоны).

• Запускаете ли вы какую-либо страницу переопределяет CSS через плагин/аддон через локальный браузер
• Доступно ли обновление версии для установки FF?
• Возникает ли проблема в SBX/testing или она также появляется "в дикой природе" на другом компьютере? При тестировании браузера я предпочитаю тестировать на нескольких компьютерах (и типах устройств), чтобы изолировать локальные проблемы конфигурации.
• Проводите ли вы какие-либо тесты на лакмус/страницу?

Ответ 3

Другие предложили это для FF:

<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Ответ 4

В Firefox используется другой механизм рендеринга (Gecko) по сравнению с Chrome (Blink), который может объяснить поведение разных рендеринга. Однако, поскольку нет явной информации или документации, которые можно найти по этому вопросу, конкретный ответ не может быть дан. Лучше всего довести это до Mozilla и тем временем увидеть, можете ли вы использовать альтернативу @font-face, если это мешает вашей работе.

Ответ 5

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

Ответ 6

Сообщение в блоге Woff и кеширование * предполагают, что при использовании неправильного/неизвестного типа MIME шрифт не будет кэшироваться и снова запрашиваться каждый раз, когда это необходимо. В статье они не используют правильный тип, хотя, как это было тогда не стандартизировано.

Статья довольно старая, начиная с 2010 года и может быть неактуальной, но использование правильного типа MIME, конечно же, не повредит. правильный тип MIME для WOFF - application/font-woff.

_{* Первоначально опубликовано Bes, но удалено с помощью ♦. Не объясняя, почему шрифт должен быть запрошен снова при изменении размера, я думаю, что все же может быть полезно рассмотреть проблемы кэширования.}