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
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:
Placez le fichier .exe dans le même dossier que la police à modifier.
Accédez à ce répertoire dans la ligne de commande
tapez
embed fontname.fonttype, en remplaçant fontname par le nom de fichier et fonttype par l’extension i.e.embed brokenFont.ttfTerminé! 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')
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.
Essayez ceci, ajoutez ces lignes dans le fichier 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 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
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.
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.
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
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.
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>
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
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 .
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');
}
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 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.
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');
}
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');
}