Заставьте шрифты Adobe работать с CSS3 @ font-face в IE9 - PullRequest
Новая
       44

Заставьте шрифты Adobe работать с CSS3 @ font-face в IE9

130 голосов
/ 08 апреля 2011

Я нахожусь в процессе создания небольшого приложения для внутренней сети и безуспешно пытаюсь использовать шрифт Adobe , который я приобрел в последнее время. Как мне сообщили, в нашем случае это не нарушение лицензии.

Я конвертировал версии шрифта .ttf / .otf в .woff, .eot и .svg, чтобы охватить все основные браузеры. Синтаксис @ font-face, который я использовал, в основном пуленепробиваемый от Шрифт Spring : 

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot');
    src: url('myfont-webfont.eot?#iehack') format('eot'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

Я изменил заголовки HTTP (добавил Access-Control-Allow-Origin = "*"), чтобы разрешить междоменные ссылки. В FF и Chrome он работает отлично, но в IE9 я получаю: 

CSS3111: @font-face encountered unknown error.  
myfont-webfont.woff
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
myfont-webfont.ttf

Я заметил, что при преобразовании шрифта из .ttf / .otf в .woff я также получаю файл .afm , но я понятия не имею, важно это или нет ...

Есть идеи как это решить?

[Редактировать] - я размещаю свои веб-сайты (шрифты тоже, но в отдельном каталоге и поддомене для статического содержимого) под IIS 7.5

Ответы [ 18 ]

94 голосов
/ 10 апреля 2011

Я могу только объяснить вам, как исправить ошибку «CSS3114».
Вы должны изменить уровень встраивания вашего файла TTF.

Используя соответствующий инструмент , вы можете установить его на разрешено встраиваемое встраивание .
Для 64-битной версии проверьте @ user22600's answer .

36 голосов
/ 11 апреля 2015

Как сказал Кну, вы можете использовать этот инструмент , однако он скомпилирован только для MS-DOS. Я скомпилировал его для Win64. Скачать .

Использование:

  1. Поместите .exe в ту же папку, в которой вы хотите изменить шрифт

  2. Перейдите к этому каталогу в командной строке

  3. введите embed fontname.fonttype, заменив имя шрифта именем файла и тип шрифта расширением, т.е. embed brokenFont.ttf

  4. Все готово! Теперь ваш шрифт должен работать.

33 голосов
/ 27 марта 2012

Вы должны установить формат шрифта ie на 'embedded-opentype', а не 'eot'.Например: 

src: url('fontname.eot?#iefix') format('embedded-opentype')
12 голосов
/ 20 апреля 2012

Я получил следующую ошибку:

CSS3114: @ font-face не удалось проверить разрешение на встраивание OpenType. Разрешение должно быть установлено.
fontname.ttf

После использования приведенного ниже кода моя проблема была решена .... 

src: url('fontname.ttf') format('embedded-opentype')

Спасибо, ребята, что помогли мне!
Cheers,
Renjith.

9 голосов
/ 30 января 2013

Попробуйте, добавьте эти строки в web.config. 

<system.webServer>
  <staticContent>
     <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
  </staticContent>
</system.webServer>
8 голосов
/ 13 января 2017

Другой ответ: Правовые вопросы.

Перед тем, как сделать это, нужно кое-что отметить.Во-первых, чтобы получить эту ошибку, в IE, проверить элемент, переключить вкладки и найти ошибки, я полагаю, "CSS3114" появляется в консоли.

Что вам нужно понять, так это вопрос лицензирования.IE (каламбур), если вы пытаетесь загрузить шрифт, который вызывает эту ошибку, у вас нет разрешения на использование шрифта в файле, и если у вас нет разрешения, очень вероятно, что вы потеряетеюридическая битва (что само по себе крайне маловероятно) за использование этого шрифта таким образом, если вы не обладаете лицензией.Итак, вы можете в первый раз поблагодарить IE за то, что он единственный браузер, который говорит вам «нет», потому что он по крайней мере позволяет вам знать, что вы делаете что-то сомнительное.

Тем не менее, вот ваш ответ:

Сначала убедитесь, что вы используете лучший код в .css, посмотрите некоторые другие ответы CSS для этого.
Пример IE 11 css(работа во всех современных браузерах может потребоваться настроить для IE9): 

@font-face {
font-family: "QuestionableLegalFont";
font-weight: bold;
src: url('../fonts/QuestionableLegalFont.ttf') format('truetype');
}

Затем убедитесь, что у вас есть работающий веб-шрифт (вы, вероятно, уже знаете это, увидев свой шрифт в других браузерах).Если вам нужен онлайн-конвертер шрифтов, проверьте здесь: https://onlinefontconverter.com/

Наконец, чтобы избавиться от ошибки «CSS3114».Для онлайн-инструмента, нажмите здесь: https://www.andrebacklund.com/fontfixer.html

7 голосов
/ 06 октября 2015

Я потратил много времени из-за этой проблемы. Наконец я нашел отличное решение сам. До этого я использовал только шрифт .ttf. Но я добавил один дополнительный формат шрифта .eot, который начал работать в IE.

Я использовал следующий код, и он работал как шарм во всех браузерах. 

@font-face {
font-family: OpenSans;
src: url(assets/fonts/OpenSans/OpenSans-Regular.ttf), 
url(assets/fonts/OpenSans/OpenSans-Regular.eot);
}

@font-face {
font-family: OpenSans Bold;
src: url(assets/fonts/OpenSans/OpenSans-Bold.ttf),
url(assets/fonts/OpenSans/OpenSans-Bold.eot);
}

Надеюсь, это кому-нибудь поможет.

7 голосов
/ 14 апреля 2011

Это правда, что IE9 требует, чтобы шрифты TTF имели биты встраивания, установленные на Устанавливаемые. Генератор делает это автоматически, но в настоящее время мы блокируем шрифты Adobe по другим причинам. Мы можем снять это ограничение в ближайшем будущем.

4 голосов
/ 28 октября 2015

Если вы знакомы с nodejs / npm, ttembed-js - это простой способ установить флаг "доступное для установки встраивание" для шрифта TTF.Это изменит указанный файл .ttf: 

npm install -g ttembed-js

ttembed-js somefont.ttf
4 голосов
/ 16 ноября 2014

Как пользователь Mac, я не смог использовать инструменты командной строки MS-DOS и Windows, о которых говорилось, чтобы исправить разрешение на встраивание шрифта.Однако я обнаружил, что это можно исправить с помощью FontLab, чтобы установить разрешение «Все разрешено».Надеюсь, что этот рецепт о том, как установить разрешение для шрифта для Installlable в Mac OS X , будет полезен и для других.

Страница:
...