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

Я занимаюсь созданием небольшого приложения для интрасети и стараюсь, без всякого случая, использовать шрифт 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

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

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

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

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

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

Ответ 4

Появилась следующая ошибка:

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

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

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

Спасибо, ребята, за помощь! Cheers,
Renjith.

Ответ 5

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

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

Ответ 6

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

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

Что вам нужно понять, так это проблема лицензирования. И.Е. (каламбур), если вы пытаетесь загрузить шрифт, который вызывает эту ошибку, у вас нет прав на использование шрифта, и если у вас нет разрешения, очень вероятно, что вы можете потерять правовую битва (которая сама по себе маловероятна), используя этот шрифт таким образом, если вы не держите лицензию. Итак, вы можете в первый раз поблагодарить 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

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

Ответ 8

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

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

Ответ 9

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

Ответ 10

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

npm install -g ttembed-js

ttembed-js somefont.ttf

Ответ 11

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

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

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

Ответ 12

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

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

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

Ответ 13

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

Ответ 14

Вы можете решить это, выполнив код

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

Ответ 15

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

Ответ 16

Я попробовал инструмент ttfpatch, и это не сработало. Internet Exploder 9 и 10 по-прежнему жаловались.

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

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

Ответ 17

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

Ответ 18

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

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