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

Question

Это сводит меня с ума.

Просто протестировал сайт на IE9 и обнаружил, что «живая» версия отображает веб-шрифт, который я использую меньше, чем в версии dev.

Вот несколько скриншотов:

Я использую набор Font Squirrel @ font-face. Как вы видите, это нормально для Firefox, Chrome и даже IE9 при просмотре локальной версии сайта.

Единственное различие между локальной и действующей версиями заключается в том, что шрифт загружается из другого домена на действующем сайте (я правильно настроил междоменную политику, о чем свидетельствует тот факт, что она работает в Firefox и Chrome ).

Я не могу вспомнить, как это выглядело в IE8 (Microsoft опять не думала о разработчиках и установила IE9 поверх IE8, не имея возможности запускать их одновременно)

Сайт находится по адресу http://enplanner.com, поэтому вы можете просмотреть источник.

Любая помощь по этому вопросу будет очень признательна - спасибо заранее.

Редактировать: Я удалил IE9 и обнаружил, что он выглядит одинаково как на локальном, так и на живом в IE8. Похоже, IE8 имеет превосходный механизм рендеринга, который ближе к FF / Chrome, чем IE9. Это довольно удручающее открытие.

Answer 1

IE9 поддерживает .WOFF;IE8 не поддерживает и поддерживает только шрифты .EOT.

Откройте Инструменты разработчика IE9 F12, и вы увидите следующие сообщения:

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
Neuton-webfont.woff

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
YanoneKaffeesatz-Regular-webfont.woff

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
Neuton-webfont.ttf

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
YanoneKaffeesatz-Regular-webfont.ttf

Изучая ваши заголовки HTTP, ясно, что ваши перекрестныедоступ к домену не настроен должным образом, так как в ваших файлах WOFF нет заголовка ответа Access-Control-Allow-Origin.Они также поставляются с неправильным типом MIME (text/plain), хотя это не вызывает вашей проблемы.Однако невозможность сопоставить woff с правильным типом MIME может вызвать проблемы, поскольку некоторые серверы не будут обслуживать файлы с «неопределенными» расширениями и вместо этого будут возвращать ошибку HTTP/404.

Answer 2

ОК, вот что сработало. Поместите следующий раздел в конфигурацию Apache для хоста, с которого вы обслуживаете шрифты:

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

Замените "mydomain.com" на ваш собственный домен или * (но будьте осторожны, используя *, поскольку это означает, что любой может использовать ваш CDN)

«| woff» было то, что я забыл. Doh!

Answer 3

Для IIS Добавьте строки ниже .... работает как шарм

---

<system.webServer>
          <httpProtocol>
          <customHeaders>
              <add name="Access-Control-Allow-Origin" value="*" />
              <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
              <add name="Access-Control-Allow-Headers" value="Content-Type" />
          </customHeaders>
      </httpProtocol>
  </system.webServer>

Answer 4

Относительно ответа Meanstreakuk выше, я хотел бы дополнить.У нас была та же проблема, и мы искали, что делает Google Web Font.Итак, мы добавили в наш htaccess:

Заголовок вместо Access-set-Access-Control-Allow-Origin "*"

.Если звездочка, как у Google, работает постоянно.

Answer 5

Альтернативным решением для использования заголовка Access-Control-Allow-Origin является внедрение шрифта в ваш CSS с использованием данных:.

Answer 6

Проверьте, можете ли вы открыть в IE файл (your-web.com/your-font.woff). Если вы получили ошибку 404, перейдите в IIS, дважды щелкните параметр конфигурации «Типы MIME», имея корневой узел IIS.выберите на левой панели и нажмите ссылку «Добавить ...» на панели «Действия» справа.Это вызовет следующий диалог.Добавьте расширение *. 1001 * woff и укажите « application / x-font-woff » в качестве соответствующего типа MIME.

Я использую эту инструкцию на этом сайте ( Robòtica educativa ), я конвертирую свой оригинальный шрифт .ttf в (http://www.font2web.com/)

)

Answer 7

Я нашел один обходной путь.Добавил это в htaccess.

BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support

Answer 8

Не забудьте включить .svg - это может быть необходимо в некоторых случаях.Добавление его решило проблему в IE 11

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

Answer 9

Стоит также отметить, что если ваши активы размещены на Amazon AWS S3, вы не сможете установить заголовки, которые отправляет сервер.Вместо этого вам нужно будет настроить параметры CORS в вашем ведре в соответствии с этими инструкциями:

• http://docs.aws.amazon.com/AmazonS3/latest/UG/EditingBucketPermissions.html
• http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

Answer 10

Заметив эту ошибку в консоли (F12): @font-face failed cross-origin request. Resource access is restricted Я обнаружил, что мой браузер (IE11, эмуляция: IE9) " заблокировал контент, чтобы защитить мою конфиденциальность ".Разблокировав контент - щелкните по значку рядом с URL-адресом - все заработало так, как должно.