@font-face не отображается правильно в IE

Я искал в течение нескольких часов, просят друзей и это не сработало. Надеюсь, вы мне поможете. Мой сайт использует пользовательский шрифт, но IE(10) не поддерживает это так, как я это делаю. Я понятия не имею, что он поддерживает другие методы. Вот мое:

    @font-face { font-family: shardee; src:url('fonts/Shardee.ttf'); }

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

когда Internet Explorer не знает шрифт, он использовал шрифт по умолчанию. Но проблема в том, что размер шрифта пользовательский шрифт идеален, но шрифт Internet Explorer по умолчанию слишком велик. Я попытался исправить это с помощью кода css IE, но он просто не работает вообще. Я использую следующий код css для Interner Explorer:

    <!--[if IE]>
      <style>
          #menu ul li{ font-size:15px; }
      </style>
    <![endif]-->

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

    <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() ?>/style/ie.css" />
    <![endif]-->

функция, которую я использую в php, - это функция wordpress, которая выводит вас на путь вашего сайта. Если вы не используете WordPress, вы можете забыть этот код и оставьте его пустым.

проблема не в пути, путь правильный. Я просмотрел исходный код в браузере, и он показал мне код, который у меня есть в ie.стиль CSS. Код в ie.css точно такой же, как и выше, но без тегов ect.

Я надеюсь, что вы, ребята, можете помочь мне с этой проблемой. 2 решения возможны, насколько я знаю. Пусть конкретный css ie работает или показывает мне способ создания пользовательских шрифтов в IE. Я использую Internet Explorer версии 10.

вы можете увидеть на сайте здесь, но как только он будет исправлен, он исчезнет, потому что мне не нужно ставить его на поддомен, как только он будет исправлен.

С уважением, Барт Рулофс!--4-->

8
cross-browser css custom-font font-face internet-explorer

6 ответов

несколько форматов шрифта

для поддержки широкого спектра браузеров, использовать .ttf, .woff и .eot версия шрифта.

@font-face {
    font-family: 'shardee';
    src: url('fonts/Shardee.eot');
    src: url('fonts/Shardee.eot?#iefix')
             format('embedded-opentype'),
         url('fonts/Shardee.woff') format('woff'),
         url('fonts/Shardee.ttf') format('truetype');
}

вы можете использовать веб-сайт преобразования шрифтов как Шрифт Белочка, чтобы преобразовать .ttf шрифты в .woff и .eot.

DRM ложноположительный

как отметил @Jukka, есть юридическая проблема с файлом TTF, которая мешает ему быть используемые в Windows. В консоли разработчика IE отображается следующее сообщение об ошибке:

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

Shardee кажется, заброшенный шрифт с неизвестный тип лицензии. Хотя использование этого шрифта может быть законным, Windows, похоже, требует, чтобы каждый файл TTF имел информацию DRM, которая явно говорит, что это законно, чтобы встроить его в веб-страницы. Ошибка в IE, скорее всего, ложноположительная.

чтобы проверить это, я взял шрифт TTF, который известен получить юридическую лицензию для использования на веб-сайтах. Версия TTF не работала в IE из-за ошибки DRM. Этот пример определенно ложноположителен. Это одна из причин, почему необходимо использовать несколько форматов шрифтов, и почему один формат, как TTF не будет работать на всех браузерах.

хотя Windows не позволяет IE использовать файл TTF, IE все еще может использовать версию WOFF или EOT. Когда я проверил выше @font-face правило на локальном веб-сервере, используя все три формата шрифтов, Шрифт Shardee отображается правильно во всех версиях IE (хотя с сообщением об ошибке в консоли разработчика IE).

шаги, чтобы попробовать:

  1. преобразование the до .woff и .eot
  2. загрузить .woff и .eot файлы в том же каталоге, что и существующие .
  3. заменить @font-face правило с одним выше. Я исправил пару опечаток в начальной версии он.

если у вас все еще есть проблема, может возникнуть проблема с настройками веб-сервера. Вопрос: IE9 блокирует загрузку веб-шрифта cross-origin

15

таким образом, проблема, по-видимому, в том, что в IE 10, меню, внутри элемента с id=menu, не отображается в объявленном шрифте "shardee", но в шрифте браузера по умолчанию. Это фактически делает меню читаемым. Но технически объяснение можно увидеть в инструментах разработчика (нажмите F12, чтобы ввести их), в панели консоли. Сообщение об ошибке с кодом CSS3114 сообщает, что @font-face не прошел проверку прав использования для встраивания.

проверьте права использования font, и свяжитесь с владельцем авторских прав (который должен считаться яркими идеями) для получения прав, если это возможно.

2

FontPrep является отличным генератором веб-шрифтов для Mac OS X. Он даже создаст шрифты.в CSS

2

IE11: Если вы получаете CSS3114 код ошибки в dev tools, вам нужно изменить первые биты файла шрифта. Это позволит IE установить шрифт.

Модуль Npm: Вы можете использовать ttembed-js модуль npm, который внесет изменения для вас. https://www.npmjs.com/package/ttembed-js

использование: ttembed-js path/to/Shardee.ttf

1

Я столкнулся с этой же проблемой и запустил F12. Кажется, представление совместимости было включено в IE10 для сайта, на котором я был. Как только я отключил совместимость, отобразится пользовательский шрифт. Надеюсь, это кому-то поможет...

0

при поиске в Интернете я нашел этот онлайн-инструмент, который выполняет исправление шрифта TTF, делая его отображаемым проводником: https://www.andrebacklund.com/fontfixer.html

0