IE9 блокирует загрузку кросс-оригинального веб-шрифта

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

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

Вот список захватов экрана:

enter image description here

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

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

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

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

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

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

4b9b3361

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 может вызвать проблемы, так как некоторые серверы не будут обслуживать файлы с расширениями "undefined" и вместо этого возвращают ошибку HTTP/404.

59
ответ дан 21 февр. '11 в 18:05
источник

ОК, вот что сработало. Разместите следующий раздел в своей конфигурации 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!

33
ответ дан 21 февр. '11 в 18:47
источник

Для 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>
8
ответ дан 15 февр. '13 в 19:47
источник

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

Набор заголовков Access-Control-Allow-Origin "*"
вместо нашего домена. Если asterisc, как и Google, работает все время.
7
ответ дан 21 дек. '11 в 0:08
источник

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

3
ответ дан 02 янв. '14 в 23:52
источник

Я нашел одно обходное решение. Добавлено это в htaccess.

BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support
3
ответ дан 09 окт. '12 в 1:15
источник

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

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

3
ответ дан 19 апр. '13 в 11:46
источник

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

<FilesMatch "\.(eot|otf|svg|woff|ttf)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
1
ответ дан 06 нояб. '14 в 2:21
источник

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

1
ответ дан 25 июля '13 в 21:54
источник

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

location ~ \.(ttf|otf|eot|woff)$ { 
    Access-Control-Allow-Origin: * 
}
0
ответ дан 07 июля '14 в 17:25
источник

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

Response.AppendHeader("Access-Control-Allow-Origin", "*");
0
ответ дан 21 дек. '12 в 23:58
источник

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

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

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

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

0
ответ дан 20 сент. '13 в 0:13
источник

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

-3
ответ дан 29 янв. '15 в 13:24
источник