IE9-CSS3111: @font-face обнаружена неизвестная ошибка

я вставляю три шрифта Google из http://www.google.com/webfonts (Dosis, Open Sans, Lato)

и все они работают нормально, кроме IE9, где он возвращает:

CSS3111: @font-face encountered unknown error. 
2HG_tEPiQ4Z6795cGfdivPY6323mHUZFJMgTvxaG2iE.eot

CSS3111: @font-face encountered unknown error. 
KlmP_Vc2zOZBldw8AfXD5g.eot

CSS3111: @font-face encountered unknown error. 
zLhfkPOm_5ykmdm-wXaiuw.eot

и иногда ломает весь сайт.

что можно сделать чтобы устранить это?

26
css3 fonts google-webfonts internet-explorer

6 ответов

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

а теперь к нашей главной изюминке- " CSS3111: @font-face encountered неизвестная ошибка." Эта ошибка очень неоднозначна. Если вы посмотрите на MSDN снова, вы увидите его описание говорит: "неизвестная проблема была встречается с "открытым форматом шрифта Web (WOFF)" и " встроенным Шрифт OpenType (EOT) " каскадирования Шрифт таблиц стилей (CSS)". "Неизвестная проблема" звучит не слишком хорошо для меня - как я должен решить неизвестную проблему? К счастью, нам намекнули. Он говорит: "проверьте источник шрифтов". Действительно, CSS3111 обычно вызывается по проблеме с двоичным источником шрифта. Один из популярных онлайн Например, преобразователи TTF в EOT создают файлы EOT с таблицей имен это не соответствует стандартам 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/

23

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

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

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

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

1

комментирование 2-го исходного объявления для шрифта EOT работало для меня. Убедитесь, что вы 1-е объявление прямо над " src: url("../ шрифты / 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"); }
1

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

Если ваши шрифты расположены на удаленном сервере (например, CDN), они не будут отображаться должным образом во всех браузерах. Это правда лишь отчасти. Да, без явного заголовка "Access-Control-Allow-Origin" Firefox и Internet Explorer не будут отображать ваши webfonts (если вы нажмете F12, чтобы открыть инструменты разработчика в IE и перейдите на вкладку консоли, вы получите css3117: @font-face failed cross-origin request. Доступ к ресурсам ограничен. ошибка) это просто потому, что 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>

см. ссылку

0

эта ошибка также может возникнуть при использовании desubroutinizeD шрифты, которые никакая версия Internet Explorer, похоже, не в состоянии обрабатывать.

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

0