web-dev-qa-db-fra.com

Faire en sorte que les polices Adobe fonctionnent 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 me l'a dit, 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 fondamentalement celle à 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. En FF et Chrome cela fonctionne parfaitement, mais dans IE9 je reçois:

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 lorsque je convertis une police .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 comment s'y prendre?

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

130
Piotr Szmyd

Je ne peux que vous expliquer comment corriger l'erreur "CSS3114".
Vous devez changer le niveau d’incorporation de votre fichier TTF. 

En utilisant le outil approprié, vous pouvez le définir sur installation incorporable autorisée.
Pour une version 64 bits, vérifiez le réponse de @ user22600.

94
Knu

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

Usage:

  1. Placez le fichier .exe dans le même dossier que la police à modifier.

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

  3. tapez embed fontname.fonttype, en remplaçant fontname par le nom de fichier et fonttype par l’extension i.e. embed brokenFont.ttf

  4. Terminé! Votre police devrait maintenant fonctionner.

35
user22600

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')
33
stefannh

Je recevais l'erreur suivante:

CSS3114: @ font-face a échoué lors de la vérification de l'autorisation d'intégration dans OpenType. La permission doit être installable.
nompolice.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 pour m'aider!
À votre santé,
Renjith.

12
Renjith

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

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

Une réponse différente: les questions juridiques.

Il y a plusieurs choses à noter avant de faire cela. Premièrement, pour obtenir cette erreur, dans IE, inspecter un élément, basculer entre vos onglets et rechercher les erreurs, je pense que "CSS3114" apparaît dans la console. 

Ce que vous devez comprendre, c’est un problème de licence. C'EST À DIRE. (jeu de mots voulu) si vous essayez de charger une police à l'origine de cette erreur, vous ne disposez pas des autorisations nécessaires pour utiliser la police, et si vous n'avez pas l'autorisation, il est très probable que vous perdiez un document bataille (ce qui est très peu probable) sur l’utilisation de cette police de cette manière à moins que vous ne possédiez la licence. Vous pouvez donc, pour la première fois, remercier IE d’être le seul navigateur à vous dire "non", car il vous permet au moins de savoir que vous faites quelque chose de douteux. 

Cela dit, voici votre réponse: 

Tout d’abord, assurez-vous d’utiliser le meilleur code en .ss, consultez quelques-unes des autres réponses CSS pour cela.
Exemple de IE 11 css (il est peut-être nécessaire de peaufiner IE9 pour tous les navigateurs modernes):

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

Ensuite, assurez-vous que votre police Web fonctionne (vous le savez probablement déjà en consultant votre police dans d’autres navigateurs). Si vous avez besoin d’un convertisseur de polices en ligne, cochez cette case: https://onlinefontconverter.com/

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

8
Patrick Knott

Il est vrai que pour IE9, les bits d’incorporation doivent être définis sur Installable dans les polices TTF. Le générateur effectue cette opération automatiquement, mais nous bloquons actuellement les polices Adobe pour d'autres raisons. Nous pourrions lever cette restriction dans un proche avenir.

7
Font Squirrel

J'ai perdu beaucoup de temps à cause de ce problème. Enfin, j'ai trouvé une excellente solution moi-même. Avant, je n'utilisais que la police de caractères .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 un 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.

7
Stack Developer

Si vous êtes familier avec nodejs/npm, ttembed-js est un moyen facile de définir l’option "Installation incorporable autorisée" sur une police TTF. Cela modifiera le fichier .ttf spécifié:

npm install -g ttembed-js

ttembed-js somefont.ttf
4
bendytree

En tant qu'utilisateur Mac, je ne pouvais pas utiliser les outils de ligne de commande MS-DOS et Windows mentionnés pour résoudre 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 manière de définir l'autorisation de police sur Installable sur Mac OS X est également utile pour les autres.

4
buijs

Le problème peut être lié à la configuration de votre serveur - il se peut que cela n’envoie pas les bons en-têtes pour les fichiers de polices. Regardez la réponse donnée à la question IE9 bloque le téléchargement de la police Web cross-Origin .

EricLaw suggère d'ajouter les éléments suivants à votre configuration Apache

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

Pour tout le monde qui obtient l'erreur: "tableversion doit être 0, 1 ou et est hex: 003" en utilisant ttfpatch, j'ai compilé embed pour 64bit Je n'ai rien changé, juste ajouté besoin de bibliothèques et compilé. Utilisez à vos risques et périls.

Utilisation: ConsoleApplication1 font.ttf

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

2
Christian

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 compilé avec Xcode, il faut attendre un an ), voici une 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 si cela corrompt.

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

2
NobleUplift

J'ai trouvé que le fichier eot devrait être placé au-delà de ttf. Si c'est sous ttf, si la police est correctement affichée, IE9 émettra quand même 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');
}

Non 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');
  }
0
shisaq

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');
}
0
w.a.siddiqui

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

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

Il suffit de copier et coller le code dans votre css.

0
Mark O'Russa

J'ai récemment rencontré ce problème avec les polices .eot et .otf générant les erreurs CSS3114 et CSS3111 dans la console lors du chargement. La solution qui a fonctionné pour moi a consisté à n'utiliser que les formats .woff et .woff2 avec un repli au format .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) ni le problème de formatage incorrect des noms de police (css3111). J'ai trouvé ma solution dans cet article extrêmement utile sur le problème CSS3111 et CSS3114 , ainsi que sur la lecture cet article sur l'utilisation de @ font-face

remarque: cette solution ne nécessite aucune nouvelle compilation, conversion ou modification de fichiers de polices. C'est une solution uniquement en CSS. La police que j'ai testée avait les versions .eot, .otf, .woff, .woff2 et .svg générées pour elle, probablement à partir de la source originale .ttf qui a généré l'erreur 3114 lorsque je l'ai essayée, mais les fichiers .woff et. Les fichiers woff2 semblent être immunisés contre ce problème.

C'est ce que DID a travaillé 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');
}
0
bwigs

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');
}
0
Alena Kastsiukavets