Змусьте шрифти 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 я отримую:

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

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

Використовуючи відповідний інструмент, ви можете встановити його для дозволеного встановлення .
Для 64-бітової версії, перевірте @ user22600 - х відповідь .

Як сказав Кну, ви можете використовувати цей інструмент , однак він складений лише для MS-DOS. Я склав його для Win64. Завантажити .

Використання:

1. Помістіть .exe в ту ж папку, що і шрифт, який потрібно змінити

2. Перейдіть до цього каталогу в командному рядку

3. тип embed fontname.fonttype, замінивши ім'я шрифту на ім'я файлу та тип шрифту розширенням, тобтоembed brokenFont.ttf

4. Готово! Тепер ваш шрифт повинен працювати.

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

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

Я отримував таку помилку:

CSS3114: @ font-face не вдалося перевірити дозвіл на вбудовування OpenType. Дозвіл має бути встановленим.
fontname.ttf

Після використання наведеного нижче коду мою проблему вирішили ....

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

Дякую, хлопці, що допомогли мені!
Ура,
Ренджіт.

Спробуйте це, додайте ці рядки в web.config.

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

Інша відповідь: Юридичні питання.

Перед цим потрібно зауважити кілька речей. По-перше, щоб отримати цю помилку, в IE перевірити елемент, переключити свої вкладки та шукати помилки, я вважаю, що "CSS3114" з'являється в консолі.

Що вам потрібно зрозуміти, це питання ліцензування. IE (призначений каламбур), якщо ви намагаєтеся завантажити шрифт, що викликає цю помилку, у вас немає дозволу на використання файлу шрифту, і якщо у вас немає дозволу, велика ймовірність, що ви можете втратити юридична сутичка (що сама по собі малоймовірна) за використання цього шрифту таким чином, якщо у вас немає ліцензії. Отже, ви можете вперше подякувати IE за те, що він є єдиним браузером, який сказав вам "ні", оскільки це принаймні дає вам знати, що ви робите щось сумнівне.

Це сказав, ось ваша відповідь:

Спочатку переконайтеся, що ви використовуєте найкращий код у .css, перегляньте деякі інші відповіді css для цього.
Приклад css IE 11 (працює у всіх сучасних браузерах, можливо, потрібно підправити 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, щоб встановити дозвіл на "Все дозволено". Я сподіваюся, що цей рецепт про те, як встановити дозвіл на шрифт на Instalable на Mac OS X, буде корисний і для інших.

Якщо ви знайомі з nodejs / npm, ttembed-js - це простий спосіб встановити прапор "Дозволено встановлення вбудованого дозволу" на шрифт TTF. Це дозволить змінити вказаний .ttf файл:

npm install -g ttembed-js

ttembed-js somefont.ttf

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

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 font.ttf

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

Якщо ви хочете зробити це за допомогою 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 можна знайти тут .

Вирішити це можна за допомогою наступного коду

@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, і це вирішило мої проблеми. 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');
}