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

Question

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

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

Вот выбор снимков экрана:

Я использую Font Squirrel @font-face kit. Как вы можете видеть, это нормально для 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, становится ясно, что ваш междоменный доступ не настроен должным образом, так как нет Access-Control-Allow-Origin заголовок ответа на ваши файлы WOFF. Они также поставляются с неправильным типом 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-Control-Allow-Origin "*"

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

Answer 5

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

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

Answer 6

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

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

Я попробовал все, от изменения конфигурации apache и файлов.htaccess, но безуспешно. В инструментах разработки IE я наткнулся на "Режим документа", и по умолчанию был IE7. Итак, после некоторых исследований я нашел этот метатег:

<meta http-equiv="X-UA-Compatible" content="IE=9">

Теперь IE 10 и 9 правильно форматируют мой сайт и правильно отображают все иконки Font Awesome.

Надеюсь, это поможет...

Answer 11

НЕ ИСПЫТАНО!
Бит файла сайта Nginx, позволяющий просто получить исходный доступ к файлам шрифтов, если ваш CDN не публичный:-) Удачного кодирования

location ~ \.(ttf|otf|eot|woff)$ { 
    Access-Control-Allow-Origin: * 
}

Answer 12

Для реализации в ASP.Net вы можете использовать этот синтаксис

Response.AppendHeader("Access-Control-Allow-Origin", "*");

Answer 13

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