IE9 - CSS3111: @font-face столкнулась с неизвестной ошибкой

Ответ 1

Я нашел этот ответ, который затрагивает вопрос более непосредственно, чем принятый ответ, который на самом деле не должен был быть ответом:)

И теперь к нашему главному событию - столбец "CSS3111: @font-face" неизвестная ошибка ". Эта ошибка очень неоднозначна. Если вы посмотрите на MSDN снова, вы увидите, что в его описании говорится:" Неизвестная проблема была столкнулись с "Формат открытых веб-шрифтов (WOFF)" и "Встроенные OpenType font (EOT)" шрифта Cascading Style Sheets (CSS) "." Неизвестная проблема "звучит не слишком хорошо для меня - как я должен решить неизвестную проблему? К счастью, нам дали намек. Это говорит:" Проверьте источник шрифтов". Действительно, CSS3111 обычно вызван по проблеме с бинарным источником шрифта. Один из популярных онлайн Конвертеры TTF в EOT, например, создают EOT файлы с таблицей NAME что не соответствует стандартам Microsoft, что приводит к EOT шрифты, которые никогда не загружаются в IE и не приводят к ошибке CSS3111. Так когда вы испытываете CSS3111, всегда полезно попробовать другое Конвертер TTF в EOT или генератор шрифта.

Источник: http://www.marinbezhanov.com/web-development/16/how-to-embed-webfonts-properly-and-how-to-solve-the-ambiguous-css3111-font-face-encountered-unknown-error/

Ответ 2

Я решил проблему в IE 9, используя ниже @font-face:

@font-face {
    font-family: Gidole;
    src: url('Gidole-Regular.woff2') format('woff2'),
         url('Gidole-Regular.woff') format('woff');
}

Ответ 3

Мы надеемся, что следующее примечание будет полезно для вас:

Если ваши шрифты расположены на удаленном сервере (например, CDN), они не будут отображаться правильно во всех браузерах. Это лишь частично верно. Да, без явного заголовка "Access-Control-Allow-Origin" Firefox и Internet Explorer не будут отображать ваши веб-сайты (если вы нажмете F12, чтобы открыть Инструменты разработчика в IE и перейти на вкладку "Консоль", вы получите CSS3117: @font-face не удалось выполнить запрос на перекрестный поиск. Доступ к ресурсу ограничен. Ошибка) Это просто потому, что IE и Firefox не позволяют междоменные шрифты по умолчанию. С другой стороны, Google Chrome будет загружать шрифты без проблем, и если вы не знаете о проблеме с перекрестным происхождением, отладка может сильно расстроиться. Хотя я лично предпочитаю размещать свои шрифты в одном и том же домене, вы все равно можете разместить их в удаленном месте и успешно загружать их во всех браузерах, если вы добавите это объявление в свой основной файл .htaccess:

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

См. ссылку

Ответ 4

Мы обнаружили, что вы получили ту же ошибку из-за новой политики Windows 10. Если ваша ошибка возникает в Windows 10 + IE11, решение может быть следующим:

IE 11: ошибка CSS3111 в моем собственном коде, а google.com/fonts не отображает шрифты

Ответ 5

Комментарий для 2-го исходного объявления для шрифта EOT работал у меня. Удостоверьтесь, что первое объявление прямо над "src: url (".. /fonts/webfonts/Helvetica Neue.eot ");

Протестировано в Chrome, Firefox, Sarafi, IE9-10-11.

@font-face {
  font-family: 'Helvetica Neue';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/webfonts/Helvetica Neue.eot");
  src: local("Helvetica Neue"), local("Helvetica Neue"),
    /*url("../fonts/webfonts/Helvetica Neue.eot?#iefix") format("embedded-opentype"),*/
    url("../fonts/webfonts/Helvetica Neue.woff2") format("woff2"),
    url("../fonts/webfonts/Helvetica Neue.woff") format("woff"),
    url("../fonts/webfonts/Helvetica Neue.ttf") format("truetype"),
    url("../fonts/webfonts/Helvetica Neue.svg") format("svg"); }

Ответ 6

Эта ошибка также может возникать при использовании десуброутинизированных шрифтов, которые, по-видимому, не могут обрабатывать никакие версии Internet Explorer.

Если вы создаете файлы шрифтов, используя pyftsubset из fonttools, убедитесь, что вы не устанавливаете флаг --desubroutinize.