@ font-face EOT не загружается по HTTPS - PullRequest
Новая
       41

@ font-face EOT не загружается по HTTPS

49 голосов
/ 13 октября 2011

Сводка

Я столкнулся с проблемой использования @ font-face поверх HTTPS в IE 7,8,9 - он просто не загружается.Не имеет значения, размещена ли содержащая HTML-страница на HTTPS или нет, , когда я пытаюсь загрузить шрифт EOT через HTTP, он работает, HTTPS - не .Кто-нибудь видел такое поведение?

Сервер, на котором размещен шрифт, отправляет правильный контент-тип = "application / vnd.ms-fontobject"

Я пробовал несколько шрифтов, поэтому он не относится к шрифту.

Шрифты были сгенерированы в Font Squirrel

Синтаксис CSS 

@font-face {
font-family: 'GothamCondensedBold';
src:url('path/to/fontgothmbcd-webfont.eot');
src:url('path/to/fontgothmbcd-webfont.eot?#iefix') format('embedded-opentype'),
    url('path/to/fontgothmbcd-webfont.woff') format('woff'),
    url('path/to/fontgothmbcd-webfont.ttf') format('truetype'),
    url('path/to/fontgothmbcd-webfont.svg#GothamCondensedBold') format('svg');
font-weight: normal;
font-style: normal;
}

Пример страницы

http://gregnettles.net/dev/font-face-test.html

Ответы [ 17 ]

42 голосов
/ 13 августа 2013

Я столкнулся с этой проблемой с HTTPS, но не с HTTP.По какой-то причине IE продолжал бы использовать различные параметры шрифта, игнорируя ответы 200 OK.

В моем случае проблема заключалась в HTTP-заголовке Cache-Control: no-cache для шрифта.Хотя это будет нормально работать с HTTP, через HTTPS он заставляет Internet Explorer игнорировать загруженный шрифт.

Мое лучшее предположение состоит в том, что это изменение этого поведения:

KB 815313 - Предотвращение кэширования при загрузке активных документов по SSL ( архив )

Итак, если вы видите, как IE работает через каждыйшрифта в сетевом представлении Developer Tools, возможно, стоит проверить наличие заголовка Cache-Control и удалить его.

23 голосов
/ 01 мая 2014

Я знаю, что это старый поток, но мне просто нужно было взвесить. У нас была одна и та же проблема со шрифтами EOT и WOFF во всех версиях Internet Explorer (7-11), не загружающихся по HTTPS. После нескольких часов проб и ошибок и сравнения наших заголовков с другими работающими сайтами мы обнаружили, что заголовок vary все портит. Отключение этого заголовка для этих типов файлов решило нашу проблему сразу. 

<FilesMatch "\.(woff)$">
    Header unset Vary
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Vary
</FilesMatch>

Бонус Чтение

7 голосов
/ 19 марта 2016

Обычно это происходит из-за следующих заголовков ответов при загрузке файлов .woff или .eot.

  • Cache-Control = no-cache, no-store, max-age = 0, must-revalidate
  • Pragma = no-cache

В моем случае я использую spring-boot и для удаления этих заголовков мне пришлось сделать следующее.что также решило проблему. 

public class SecurityConfig extends WebSecurityConfigurerAdapter { 
@Override
public void configure(HttpSecurity http) throws Exception {
   http.headers().defaultsDisabled()
        .addHeaderWriter(new StaticHeadersWriter("Cache-Control"," no-cache,max-age=0, must-revalidate"))
        .addHeaderWriter(new StaticHeadersWriter("Expires","0"));
 }
}
4 голосов
/ 16 марта 2017

Вот мое исправление:

Использование надстройки перезаписи URL для IIS для установки заголовка Cache-Control для всех файлов EOT: 

<system.webServer>
....
<rewrite>
  <outboundRules>
    <rule name="Fix IE9 missing font icons">
      <match serverVariable="RESPONSE_Cache_Control" pattern=".*" />
      <conditions>
          <add input="{REQUEST_URI}" pattern="\.eot.*" />
      </conditions>
      <action type="Rewrite" value="private, max-age=36000" />
    </rule>
  </outboundRules>
</rewrite>
</system.webServer>
4 голосов
/ 01 апреля 2015

Без заголовков кэша я заметил, что клиенты IE9 на Windows Vista по-прежнему не загружают шрифты (даже если на моей более новой машине разработки IE11 в режиме эмуляции IE9 это делает).

Мне удалось устранить проблему на клиентских компьютерах в Internet Explorer, перейдя по адресу:

  • Свойства обозревателя
  • Дополнительно
  • Безопасность

И снятие отметки с опции « Не сохранять зашифрованные страницы на диск ».

Чтение бонусов

HTH

3 голосов
/ 13 октября 2011

Кажется, я помню, что в некоторых версиях IE нельзя использовать шрифт @fontface, размещенный за пределами домена сайта (если страница имеет значение http://a.domain.tld/page.html - шрифт также должен быть в http://a.domain.tld/) по одной причине или другой. Поместите файл EOT в свой домен и попробуйте еще раз.

IE9 блокирует загрузку веб-шрифта кросс-происхождения

2 голосов
/ 07 апреля 2017

Эта проблема теперь решена путем добавления следующих записей в httpd.conf или .htaccess на сервере apache.

Чтобы заставить его работать, мы изменили использование FilesMatch на LocationMatch, и теперь заголовки устанавливаются идеально.

Чтобы установить правильные типы MIME для файлов шрифтов, добавьте следующие строки в config: 

 AddType application/vnd.ms-fontobject .eot
 AddType font/truetype .ttf
 AddType font/opentype .otf
 AddType font/opentype .woff
 AddType image/svg+xml .svg .svgz

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

<LocationMatch "\.(eot|otf|woff|ttf)$">
   Header unset Cache-Control
   Header unset no-store
</LocationMatch >
2 голосов
/ 25 марта 2016

Рабочим решением для Apache / 2.2.15 является добавление .htaccess 

<FilesMatch "\.(woff)$">
    Header unset Cache-control
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Cache-control
</FilesMatch>
1 голос
/ 06 июля 2012

Это звучит как проблема с вашим CDN. Вы можете убедиться в этом, изменив свой хост-файл так, чтобы ваш домен SSL указывал на любой IP-адрес, по которому передается ваш трафик, отличный от SSL. Если шрифт отображается, вам нужно вызвать CDN и выяснить, что их серверы делают с файлами шрифтов.

1 голос
/ 13 октября 2011

Вы пытались напрямую загрузить файл EOT через https?Сертификат SSL кажется неправильным (несоответствующим), что вполне может стать вашей проблемой.

Также следует убедиться, что для этих файлов настроена междоменная политика, поэтому, возможно, онафактор в этом вопросе, это может вызвать проблемы для некоторых браузеров.

Страница:
...