Сделать шрифты Adobe работать с CSS3 @ font-face в IE9
Я занимаюсь созданием небольшого приложения для интрасети и стараюсь, если не повезло, использовать шрифт Adobe, который я приобрел в последнее время. Как мне сообщили, в нашем случае это не является нарушением лицензии.
Я преобразовал версии .ttf / .otf шрифта в .woff, .eot и .svg, чтобы настроить таргетинг на все основные браузеры. Синтаксис @ font-face, который я использовал, в основном пуленепробиваемый из Font 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 я получаю:
- Градиенты в Internet Explorer 9
- IE9 JSON Data "вы хотите открыть или сохранить этот файл"
- : активный селектор css не работает для IE8 и IE9
- Как отключить защищенный режим в Internet Explorer 9?
- Загрузка нескольких файлов без использования Zip-файла
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
- Как открыть пустое новое окно в IE9 вместо копии текущего окна?
- Internet Explorer 9 не правильно отображает ячейки таблицы
- Как вручную добавить в Internet Explorer список защиты слежения (TPL), который не находится на веб-сайте галереи Internet Explorer?
- Видео в Facebook не воспроизводятся с помощью IE9 и Flash Player
- Размер фона с SVG в IE9-10
- Как я могу настроить SmartScreen Filter на самозаверяющий сертификат
- Поддерживает ли IE9 линейные gradleиенты CSS?
- Какую техническую причину Microsoft дал для Internet Explorer 9 в Windows XP?
Я могу только объяснить вам, как исправить ошибку «CSS3114».
Вы должны изменить уровень внедрения вашего TTF-файла.
Используя соответствующий инструмент, вы можете установить его для разрешимого внедрения .
Для 64-разрядной версии проверьте ответ @ user22600.
Вы должны установить формат шрифта ie для «embedded-opentype», а не «eot». Например:
src: url('fontname.eot?#iefix') format('embedded-opentype')
Как сказал Кну, вы можете использовать этот инструмент , однако он скомпилирован только для MS-DOS. Я скомпилировал его для Win64. Скачать .
Применение:
-
Поместите файл .exe в ту же папку, что и шрифт, который необходимо изменить.
-
Перейдите в этот каталог в командной строке
-
type
embed fontname.fonttype
, заменив имя шрифта на имя файла и тип шрифта на расширение, т.е.embed brokenFont.ttf
-
Все сделано! Теперь ваш шрифт должен работать.
Я получил следующую ошибку:
CSS3114: @ font-face не удалось выполнить проверку разрешений OpenType. Разрешение должно быть установлено.
fontname.ttf
После использования приведенного ниже кода моя проблема была решена ….
src: url('fontname.ttf') format('embedded-opentype')
Спасибо, ребята, за помощь!
Ура,
Renjith.
Попробуйте это, добавьте эти строки в web.config.
Другой ответ: правовые вопросы.
Перед тем, как вы это сделаете, нужно сделать пару вещей. Во-первых, чтобы получить эту ошибку, в 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
Верно, что IE9 требует, чтобы шрифты TTF имели биты внедрения, установленные в Installable. Генератор делает это автоматически, но в настоящее время мы блокируем шрифты Adobe по другим причинам. Мы можем снять это ограничение в ближайшем будущем.
Из-за этой проблемы я потратил много времени. Наконец, я нашел отличное решение. Раньше я использовал только шрифт .ttf. Но я добавил один дополнительный формат шрифта., Который начал работать в 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); }
Надеюсь, это поможет кому-то.
Как пользователь Mac, я не смог использовать инструменты командной строки MS-DOS и Windows, которые были упомянуты, чтобы исправить разрешение на размещение шрифтов. Однако я выяснил, что вы можете исправить это, используя FontLab, чтобы установить разрешение «Все разрешено». Я надеюсь, что этот рецепт о том, как установить разрешение шрифта на Installable в Mac OS X , также полезен и для других.
Если вы знакомы с nodejs / npm, ttembed-js – это простой способ установить флаг «устанавливаемый встраиваемый разрешенный» на шрифт TTF. Это изменит указанный файл .ttf:
npm install -g ttembed-js ttembed-js somefont.ttf
Проблема может быть связана с конфигурацией вашего сервера – возможно, он не отправляет правильные заголовки для файлов шрифтов. Взгляните на ответ, заданный для вопроса IE9, загружающий загрузку кросс-исходного веб-шрифта .
EricLaw предлагает добавить в конфигурацию Apache следующее:
Header set Access-Control-Allow-Origin "http://mydomain.com"
Для всех, кто получает сообщение об ошибке: «tableversion должно быть 0, 1 или или hex: 003» при использовании ttfpatch, я скомпилировал embed для 64-битного. Я ничего не изменил, просто добавил необходимые библиотеки и скомпилировал их. Используйте на свой страх и риск.
Использование: ConsoleApplication1 font.ttf
http://www.mediafire.com/download/8x1px8aqq18lcx8/ConsoleApplication1.exe
Если вы хотите сделать это с помощью PHP-скрипта вместо того, чтобы запускать C-код (или вы на Mac, как я, и вы не можете быть arsed компиляции с Xcode только ждать год, чтобы он был открыт), вот Функция PHP, которую вы можете использовать для удаления разрешений вложения от шрифта:
function convertRestrictedFont($filename) { $font = fopen($filename,'r+'); if ($font === false) { throw new Exception('Could not open font file.'); } fseek($font, 12, 0); while (!feof($font)) { $type = ''; for ($i = 0; $i < 4; $i++) { $type .= fgetc($font); if (feof($font)) { fclose($font); throw new Exception('Could not read the table definitions of the font.'); } } if ($type == 'OS/2') { // Save the location of the table definition // containing the checksum and pointer to the data $os2TableDefinition = ftell($font); $checksum = 0; for ($i = 0; $i < 4; $i++) { fgetc($font); if (feof($font)) { fclose($font); throw new Exception('Could not read the OS/2 table header of the font.'); } } // Get the pointer to the OS/2 table data $os2TablePointer = ord(fgetc($font)) << 24; $os2TablePointer |= ord(fgetc($font)) << 16; $os2TablePointer |= ord(fgetc($font)) << 8; $os2TablePointer |= ord(fgetc($font)); $length = ord(fgetc($font)) << 24; $length |= ord(fgetc($font)) << 16; $length |= ord(fgetc($font)) << 8; $length |= ord(fgetc($font)); if (fseek($font, $os2TablePointer + 8, 0) !== 0) { fclose($font); throw new Exception('Could not read the embeddable type of the font.'); } // Read the fsType before overriding it $fsType = ord(fgetc($font)) << 8; $fsType |= ord(fgetc($font)); error_log('Installable Embedding: ' . ($fsType == 0)); error_log('Reserved: ' . ($fsType & 1)); error_log('Restricted License: ' . ($fsType & 2)); error_log('Preview & Print: ' . ($fsType & 4)); error_log('Editable Embedding: ' . ($fsType & 8)); error_log('Reserved: ' . ($fsType & 16)); error_log('Reserved: ' . ($fsType & 32)); error_log('Reserved: ' . ($fsType & 64)); error_log('Reserved: ' . ($fsType & 128)); error_log('No subsetting: ' . ($fsType & 256)); error_log('Bitmap embedding only: ' . ($fsType & 512)); error_log('Reserved: ' . ($fsType & 1024)); error_log('Reserved: ' . ($fsType & 2048)); error_log('Reserved: ' . ($fsType & 4096)); error_log('Reserved: ' . ($fsType & 8192)); error_log('Reserved: ' . ($fsType & 16384)); error_log('Reserved: ' . ($fsType & 32768)); fseek($font, ftell($font) - 2); // Set the two bytes of fsType to 0 fputs($font, chr(0), 1); fputs($font, chr(0), 1); // Go to the beginning of the OS/2 table data fseek($font, $os2TablePointer, 0); // Generate a new checksum based on the changed for ($i = 0; $i < $length; $i++) { $checksum += ord(fgetc($font)); } fseek($font, $os2TableDefinition, 0); fputs($font, chr($checksum >> 24), 1); fputs($font, chr(255 & ($checksum >> 16)), 1); fputs($font, chr(255 & ($checksum >> 8)), 1); fputs($font, chr(255 & $checksum), 1); fclose($font); return true; } for ($i = 0; $i < 12; $i++) { fgetc($font); if (feof($font)) { fclose($font); throw new Exception('Could not skip a table definition of the font.'); } } } fclose($font); return false; }
Обязательно создайте резервную копию файла шрифта перед запуском этого кода и не обвиняйте меня в том, что он поврежден.
Исходный источник в C можно найти здесь .
Вы можете решить это, следуя коду
@font-face { font-family: 'Font-Name'; src: url('../fonts/Font-Name.ttf'); src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype'); }
Я нашел, eot
файл eot
должен быть помещен за пределы ttf
. Если он находится под ttf
, подумал, что шрифт отображается правильно, IE9 все равно выдаст ошибку.
Рекомендовать:
@font-face { font-family: 'Font-Name'; src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype'); src: url('../fonts/Font-Name.ttf') format('truetype'); }
Не рекомендуется:
@font-face { font-family: 'Font-Name'; src: url('../fonts/Font-Name.ttf') format('truetype'); src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype'); }
Я попробовал инструмент ttfpatch, и это не сработало. Internet Exploder 9 и 10 по-прежнему жаловались.
Я нашел этот красивый Git gist, и он решил мои проблемы. https://gist.github.com/stefanmaric/a5043c0998d9fc35483d
Просто скопируйте и вставьте код в свой css.
Недавно я столкнулся с этой проблемой с помощью .eot и .otf шрифтов, создающих ошибки CSS3114 и CSS3111 в консоли при загрузке. Решение, которое работало для меня, состояло в том, чтобы использовать только форматы .woff и .woff2 с откатком формата .ttf. Форматы .woff будут использоваться до .ttf в большинстве браузеров и, похоже, не вызовут проблему разрешения вложений в шрифт (css3114) и проблему с неправильным форматом имен шрифтов (css3111). Я нашел свое решение в этой чрезвычайно полезной статье о проблеме CSS3111 и CSS3114 , а также прочитал эту статью об использовании @ font-face .
Примечание. Это решение не требует повторной компиляции, преобразования или редактирования любых файлов шрифтов. Это css-единственное решение. У шрифта, который я тестировал, были выпущены версии .eot, .otf, .woff, .woff2 и .svg, вероятно, из исходного источника .ttf, который вызвал ошибку 3114, когда я его попробовал, однако .woff и. Файлы woff2, казалось, были невосприимчивы к этой проблеме.
Это то, что DID работает для меня с @ font-face:
@font-face { font-family: "Your Font Name"; font-weight: normal; src: url('your-font-name.woff2') format('woff2'), url('your-font-name.woff') format('woff'), url('your-font-name.ttf') format('truetype'); }
Именно это вызвало ошибки с @ font-face в IE:
@font-face { font-family: 'Your Font Name'; src: url('your-font-name.eot'); src: url('your-font-name.eot?#iefix') format('embedded-opentype'), url('your-font-name.woff2') format('woff2'), url('your-font-name.woff') format('woff'), url('your-font-name.ttf') format('truetype'), url('your-font-name.svg#svgFontName') format('svg'); }
Это работает для меня:
@font-face { font-family: FontName; src: url('@{path-fonts}/FontName.eot?akitpd'); src: url('@{path-fonts}/FontName.eot?akitpd#iefix') format('embedded-opentype'), url('@{path-fonts}/FontName.ttf?akitpd') format('truetype'), url('@{path-fonts}/FontName.woff?akitpd') format('woff'), url('@{path-fonts}/FontName.svg?akitpd#salvage') format('svg'); }