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

comme Knu l'a dit, Vous pouvez utiliser cet outil , cependant il est compilé uniquement pour MS-DOS. Je l'ai compilé pour Win64. Télécharger .

Utilisation:

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

2. naviguez vers ce répertoire dans la ligne de commande

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

4. tout est fait! Votre police devrait fonctionner.

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

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

j'ai eu l'erreur suivante:

CSS3114: @font-face manqué OpenType l'incorporation de vérification des autorisations. La Permission 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'avoir aidé!

Santé,

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 questions Juridiques.

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

ce que vous devez comprendre est qu'il s'agit d'une question de licence. I. E. (jeu de mots) si vous essayez de charger une police qui cause cette erreur, vous n'avez pas les permissions sur le fichier d'utiliser la police, et si vous n'avez pas la permission, il est très probable que vous perdrez une bataille juridique (ce qui est en soi très peu probable) sur l'utilisation de cette police de cette manière à moins que vous ne déteniez la licence. Donc, vous pouvez, pour la première fois, remercier IE d'être le seul navigateur à vous dire "non", parce qu'il vous permet au moins de savoir que vous faites quelque chose de discutable.

cela dit, voici votre réponse:

assurez-vous D'abord d'utiliser le meilleur code .css, voir certains des autres réponses css pour cela.

Exemple CSS (fonctionne dans tous les navigateurs modernes peuvent avoir besoin d'être modifié 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 qui fonctionne (vous le savez probablement déjà en voyant votre police dans d'autres navigateurs). Si vous avez besoin d'un convertisseur de police en ligne, cliquez ici: https://onlinefontconverter.com /

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

il est vrai que IE9 exige des polices TTF que les bits d'intégration soient définis pour pouvoir être installés. Le générateur le fait automatiquement, mais nous bloquons actuellement les polices Adobe pour d'autres raisons. Nous pourrions lever cette restriction dans un proche avenir.

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

j'ai utilisé le code suivant et il a fonctionné comme le 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 en ligne de commande MS-DOS et Windows mentionnés pour corriger la permission d'intégration de police. Cependant, j'ai découvert que vous pouvez corriger cela en utilisant FontLab pour définir la permission à "tout est permis". J'espère que cette recette sur la façon de définir la permission de police à installer sur Mac OS X est utile pour d'autres aussi bien.

si vous connaissez nodejs/npm, ttembed-js est un moyen facile de mettre l'indicateur" installable embedding allowed " sur une police TTF. Ceci va modifier le spécifié .ttf fichier:

npm install -g ttembed-js

ttembed-js somefont.ttf

le problème pourrait être lié à la configuration de votre serveur - il se peut qu'il n'envoie pas les bons en-têtes pour les fichiers de police. Jetez un oeil à la réponse donnée pour 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>

pour tous ceux qui ont l'erreur: "tableversion doit être 0, 1 ou et est hex:003" en utilisant ttfpatch, j'ai compilé embed pour 64bit. Je n'ai pas changé quoi que ce soit, juste ajouté des libs de besoin et compilé. Utilisez à votre propre risque.

Usage: ConsoleApplication1 de police.ttf

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

si vous voulez faire cela avec un script PHP au lieu d'avoir à exécuter du code C (ou vous êtes sur un Mac comme moi et vous ne pouvez pas être instruit en compilant avec Xcode seulement pour attendre un an pour qu'il s'ouvre), voici une fonction PHP que vous pouvez utiliser pour supprimer les permissions d'intégration 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 .

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é eot fichier doit être placé au-delà de ttf . Si C'est sous ttf , je pense que la police s'affiche correctement, IE9 lancera quand même une erreur.

recommande:

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

Pas Recommande:

@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 il n'a pas fonctionné de moi. Internet Exploder 9 et 10 se plaignent toujours.

j'ai trouvé ce Gist gentil et il a résolu mes problèmes. https://gist.github.com/stefanmaric/a5043c0998d9fc35483d

il suffit de copier-coller le code dans votre css.

j'ai récemment rencontré ce problème avec .eot et .les polices otf produisent les erreurs CSS3114 et CSS3111 dans la console lors du chargement. La solution qui a fonctionné pour moi était d'utiliser seulement .woff et .woff2 formats avec A.repli au format ttf. Le. les formats woff seront utilisés auparavant .ttf dans la plupart des navigateurs et ne semblent pas déclencher la question des permissions d'intégration de police (css3114) et la question de nom de police de format incorrect (css3111). J'ai trouvé ma solution dans cet article extrêmement utile à propos de CSS3111 et CSS3114 , et aussi en lisant cet article sur l'utilisation de @font-face .

note: Cette solution ne nécessite pas de recompilation, de conversion ou d'édition de fichiers de police. C'est une solution uniquement css. La police j'ai testé avec les ne sont .EOT. ,otf,.woff,.woff2 et .svg versions générées pour cela, probablement à partir de l'original .ttf source qui a produit l'erreur 3114 quand je l'ai essayé, cependant le .woff et .les fichiers woff2 semblaient être à 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');
}

ça marche 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');
}