Faire fonctionner les polices Adobe avec CSS3 @ font-face dans IE9

Je suis en train de créer une petite application intranet et j'essaie, sans succès, d'utiliser la police Adobe que j'ai achetée récemment. Comme on m'a informé, dans notre cas, ce n'est pas une violation de licence.

J'ai converti les versions .ttf / .otf de la police en .woff, .eot et .svg, afin de cibler tous les principaux navigateurs. La syntaxe @ font-face que j'ai utilisée est essentiellement la syntaxe à l'épreuve des balles de 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');
    }

J'ai modifié les en-têtes HTTP (ajouté Access-Control-Allow-Origin = "*") pour autoriser les références inter-domaines. Dans FF et Chrome, cela fonctionne parfaitement, mais dans IE9, j'obtiens:

CSS3111: @font-face encountered unknown error.  
myfont-webfont.woff
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
myfont-webfont.ttf

J'ai remarqué que lors de la conversion de la police de .ttf / .otf en .woff, je reçois également un fichier .afm , mais je ne sais pas si c'est important ou non ...

Des idées pour y parvenir?

[Modifier] - J'héberge mes sites Web (polices aussi, mais sous un répertoire et un sous-domaine séparés pour le contenu statique) sous IIS 7.5

Je ne peux que vous expliquer comment corriger l'erreur "CSS3114".
Vous devez modifier le niveau d'intégration de votre fichier TTF.

À l'aide de l' outil approprié , vous pouvez le définir sur l' intégration installable autorisée .
Pour une version 64 bits, consultez la réponse de @ user22600 .

Comme l'a dit Knu, vous pouvez utiliser cet outil , mais il n'est compilé que pour MS-DOS. Je l'ai compilé pour Win64. Téléchargez .

Usage:

1. Placez le .exe dans le même dossier que la police que vous devez modifier

2. Accédez à ce répertoire dans la ligne de commande

3. type embed fontname.fonttype, en remplaçant le nom de la police par le nom du fichier et le type de police par l'extension ieembed brokenFont.ttf

4. Terminé! Votre police devrait maintenant fonctionner.

Vous devez définir le format de la police ie sur 'embedded-opentype' et non sur 'eot'. Par exemple:

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

J'obtenais l'erreur suivante:

CSS3114: @ font-face a échoué la vérification des autorisations d'intégration OpenType. L'autorisation doit être installable.
fontname.ttf

Après avoir utilisé le code ci-dessous, mon problème a été résolu ....

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

Merci les gars de m'aider!
Salut,
Renjith.

Essayez ceci, ajoutez ces lignes dans le web.config.

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

Une réponse différente: les problèmes juridiques.

Il y a quelques points à noter avant de faire cela. Tout d'abord, pour obtenir cette erreur, dans IE, inspectez l'élément, changez d'onglets et recherchez les erreurs, je crois que "CSS3114" apparaît dans la console.

Ce que vous devez comprendre, c'est qu'il s'agit d'un problème de licence. IE (jeu de mots) si vous essayez de charger une police qui provoque cette erreur, vous ne disposez pas des autorisations sur le fichier pour utiliser la police, et si vous n'avez pas l'autorisation, il est fort probable que vous perdiez un bataille juridique (ce qui est en soi hautement improbable) sur l'utilisation de cette police de cette manière à moins que vous ne déteniez la licence. Ainsi, vous pouvez, pour la première fois, remercier IE d'être le seul navigateur à vous dire «non», car cela vous permet au moins de savoir que vous faites quelque chose de douteux.

Cela dit, voici votre réponse:

Assurez-vous d'abord que vous utilisez le meilleur code en .css, voyez quelques-unes des autres réponses css pour cela.
Exemple d'IE 11 css (fonctionne dans tous les navigateurs modernes, il peut être nécessaire de modifier pour IE9):

@font-face {
font-family: "QuestionableLegalFont";
font-weight: bold;
src: url('../fonts/QuestionableLegalFont.ttf') format('truetype');
}

Ensuite, assurez-vous d'avoir une police Web fonctionnelle (vous le savez probablement déjà en voyant votre police dans d'autres navigateurs). Si vous avez besoin d'un convertisseur de polices en ligne, vérifiez ici: https://onlinefontconverter.com/

Enfin, pour se débarrasser de l'erreur "CSS3114". Pour un outil en ligne, cliquez ici: https://www.andrebacklund.com/fontfixer.html

Il est vrai que IE9 requiert que les polices TTF aient les bits d'incorporation définis sur Installable. Le générateur le fait automatiquement, mais nous bloquons actuellement les polices Adobe pour d'autres raisons. Nous pouvons lever cette restriction dans un proche avenir.

J'ai perdu beaucoup de temps à cause de ce problème. Enfin, j'ai trouvé moi-même une excellente solution. Avant, j'utilisais uniquement la police .ttf. Mais j'ai ajouté un format de police supplémentaire .eot qui a commencé à fonctionner dans IE.

J'ai utilisé le code suivant et cela a fonctionné comme du charme dans tous les navigateurs.

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

J'espère que cela aidera quelqu'un.

En tant qu'utilisateur Mac, je n'ai pas pu utiliser les outils de ligne de commande MS-DOS et Windows mentionnés pour corriger l'autorisation d'incorporation de polices. Cependant, j'ai découvert que vous pouvez résoudre ce problème en utilisant FontLab pour définir l'autorisation sur «Tout est autorisé». J'espère que cette recette sur la façon de définir l'autorisation de police sur Installable sur Mac OS X sera également utile pour les autres.

Si vous êtes familier avec nodejs / npm, ttembed-js est un moyen simple de définir le drapeau "intégration installable autorisée" sur une police TTF. Cela modifiera le fichier .ttf spécifié:

npm install -g ttembed-js

ttembed-js somefont.ttf

Le problème peut être lié à la configuration de votre serveur - il peut ne pas envoyer les bons en-têtes pour les fichiers de polices. Jetez un œil à la réponse donnée à la question IE9 bloque le téléchargement de la police Web d'origine croisée .

EricLaw suggère d'ajouter ce qui suit à votre configuration Apache

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

Si vous voulez faire cela avec un script PHP au lieu d'avoir à exécuter du code C (ou si vous êtes sur un Mac comme moi et que vous ne pouvez pas être obligé de compiler avec Xcode seulement pour attendre un an pour qu'il s'ouvre), voici un Fonction PHP que vous pouvez utiliser pour supprimer les autorisations d'incorporation de la police:

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;
}

Assurez-vous de sauvegarder votre fichier de police avant d'exécuter ce code et ne me blâmez pas s'il corrompt.

La source originale en C peut être trouvée ici .

Pour tous ceux qui obtiennent l'erreur: "tableversion doit être 0, 1 ou et est hexadécimal: 003" lors de l'utilisation de ttfpatch, j'ai compilé l'embed pour 64 bits. Je n'ai rien changé, j'ai juste ajouté les bibliothèques nécessaires et compilées. Utilisez à vos risques et périls.

Utilisation: ConsoleApplication1 font.ttf

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

Vous pouvez le résoudre en suivant le code

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

J'ai trouvé que le eotfichier devrait être mis au-delà ttf. S'il est sous ttf, si la police s'affiche correctement, IE9 lancera toujours une erreur.

Recommander:

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

Ne pas recommander:

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

J'ai essayé l'outil ttfpatch et cela n'a pas fonctionné pour moi. Internet Exploder 9 et 10 se plaignaient toujours.

J'ai trouvé ce joli Git et cela a résolu mes problèmes. https://gist.github.com/stefanmaric/a5043c0998d9fc35483d

Copiez et collez simplement le code dans votre css.

J'ai récemment rencontré ce problème avec les polices .eot et .otf produisant les erreurs CSS3114 et CSS3111 dans la console lors du chargement. La solution qui a fonctionné pour moi était d'utiliser uniquement les formats .woff et .woff2 avec un format de secours .ttf. Les formats .woff seront utilisés avant .ttf dans la plupart des navigateurs et ne semblent pas déclencher le problème des autorisations d'incorporation de polices (css3114) et le problème de format incorrect de dénomination des polices (css3111). J'ai trouvé ma solution dans cet article extrêmement utile sur le problème CSS3111 et CSS3114 , et en lisant également cet article sur l'utilisation de @ font-face .

Remarque: cette solution ne nécessite pas de recompilation, de conversion ou de modification de fichiers de polices. C'est une solution uniquement css. La police avec laquelle j'ai testé avait des versions .eot, .otf, .woff, .woff2 et .svg générées pour elle, probablement à partir de la source d'origine .ttf qui a produit l'erreur 3114 lorsque je l'ai essayé, mais les .woff et. Les fichiers woff2 semblaient à l'abri de ce problème.

C'est ce qui a fonctionné pour moi avec @ 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');
}

C'est ce qui a déclenché les erreurs avec @ font-face dans 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');
}

Cela fonctionne pour moi:

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

Si vous souhaitez faire cela avec un script Python au lieu d'avoir à exécuter du code C / PHP, voici une fonction Python3 que vous pouvez utiliser pour supprimer les autorisations d'incorporation de la police:

def convert_restricted_font(filename):
with open(filename, 'rb+') as font:

    font.read(12)
    while True:
        _type = font.read(4)
        if not _type:
            raise Exception('Could not read the table definitions of the font.')
        try:
            _type = _type.decode()
        except UnicodeDecodeError:
            pass
        except Exception as err:
            pass
        if _type != 'OS/2':
            continue
        loc = font.tell()
        font.read(4)
        os2_table_pointer = int.from_bytes(font.read(4), byteorder='big')
        length = int.from_bytes(font.read(4), byteorder='big')
        font.seek(os2_table_pointer + 8)

        fs_type = int.from_bytes(font.read(2), byteorder='big')
        print(f'Installable Embedding: {fs_type == 0}')
        print(f'Restricted License: {fs_type & 2}')
        print(f'Preview & Print: {fs_type & 4}')
        print(f'Editable Embedding: {fs_type & 8}')

        print(f'No subsetting: {fs_type & 256}')
        print(f'Bitmap embedding only: {fs_type & 512}')

        font.seek(font.tell()-2)
        installable_embedding = 0 # True
        font.write(installable_embedding.to_bytes(2, 'big'))
        font.seek(os2_table_pointer)
        checksum = 0
        for i in range(length):
            checksum += ord(font.read(1))
        font.seek(loc)
        font.write(checksum.to_bytes(4, 'big'))
        break


if __name__ == '__main__':
    convert_restricted_font("19700-webfont.ttf")

cela fonctionne, mais j'ai fini par résoudre le problème du chargement des polices dans IE par https comme ceci

merci NobleUplift

La source originale en C peut être trouvée ici .