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

Question

Я нахожусь в процессе создания небольшого приложения для внутренней сети и безуспешно пытаюсь использовать шрифт 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

Answer 1

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

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

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

Answer 2

Если вы хотите сделать это с помощью PHP-скрипта вместо того, чтобы запускать код на C (или вы на Mac, подобном мне, и вы не можете быть скомпилированы с 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 можно найти здесь .

Answer 3

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

Использование: ConsoleApplication1 font.ttf

http://www.mediafire.com/download/8x1px8aqq18lcx8/ConsoleApplication1.exe

Answer 4

Я попробовал инструмент ttfpatch, и он не работал у меня. Internet Explorer 9 и 10 все еще жаловались.

Я нашел этот хороший Git Gist, и он решил мои проблемы. https://gist.github.com/stefanmaric/a5043c0998d9fc35483d

Просто скопируйте и вставьте код в ваш CSS.

Answer 5

Я обнаружил, что 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');
  }

Answer 6

Недавно я столкнулся с этой проблемой со шрифтами .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');
}

Answer 7

Это работает для меня:

@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');
}

Answer 8

Вы можете решить это с помощью следующего кода

@font-face {
  font-family: 'Font-Name';
  src: url('../fonts/Font-Name.ttf');
  src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype');
}