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

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

Я перевел .ТЦФ./otf версии шрифта to .вофф .eot и .svg, поэтому для всех основных браузеров. синтаксис @font-face, который я использовал, в основном пуленепробиваемый из Шрифт Весна:

@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

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

есть идеи, как это сделать?

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

18 ответов


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

используя соответствующий инструмент вы можете установить его, чтобы installable встраивание разрешено.
Для 64-разрядной версии, проверить @user22600 это ответ.


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

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

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

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

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

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


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

src: url('fontname.eot?#iefix') format('embedded-opentype')

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

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

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

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

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


попробуйте добавить эти строки в интернете.конфиг.

<system.webServer>
  <staticContent>
     <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
  </staticContent>
</system.webServer>

другой ответ: юридические вопросы.

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

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

что сказал, Вот ваш ответ:

сначала убедитесь, что вы используете лучший код.css, см. некоторые другие ответы css для этого.
ТО ЕСТЬ 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 имели встраиваемые биты, установленные для установки. Генератор делает это автоматически, но в настоящее время мы блокируем шрифты Adobe по другим причинам. Мы можем снять это ограничение в ближайшее время.


Я потратил много времени из-за этой проблемы. В конце концов я сам нашел отличное решение. До того, как я начал употреблять .только шрифт 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);
}

Я надеюсь, что это поможет кому-то.


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


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

npm install -g ttembed-js

ttembed-js somefont.ttf

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

EricLaw предлагает добавить следующее в вашу конфигурацию Apache

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

для всех, кто получает ошибку:" tableversion должен быть 0, 1 или и hex: 003 " при использовании ttfpatch я скомпилировал embed для 64bit. Я ничего не изменил, просто добавил нужные libs и скомпилировал. Используйте на свой страх и риск.

использование: шрифт ConsoleApplication1.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 файл должен быть помещен за пределы 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 and .форматы woff2 с a .резервный формат ttf. Этот.форматы woff будут использоваться раньше .ttf в большинстве браузеров и, похоже, не вызывает проблему разрешений на встраивание шрифтов (css3114) и проблему неправильного формата именования шрифтов (css3111). Я нашел свое решение в эта чрезвычайно полезная статья о выпуск CSS3111 и CSS3114, а также чтение эта статья об использовании @font-face.

Примечание: это решение не требует повторной компиляции, преобразования или редактирования файлов шрифтов. Это решение только для css. Шрифт, с которым я тестировал, был .eot,.otf,.вофф .woff2 and .версии svg, сгенерированные для него, вероятно, из оригинала .источник ttf, который произвел ошибку 3114, когда я попробовал его, однако .woff and .файлы woff2, казалось, были невосприимчивы к этому вопрос.

это то, что сработало для меня с @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');
}