web-dev-qa-db-fra.com

Internet Explorer @ font-face échoue

J'essaie de faire en sorte qu'Internet Explorer rende mes jolies polices. Ça ne fonctionne pas. Ils fonctionnent bien dans Firefox et je peux voir dans mes journaux d’accès Apache que IE a extrait les polices. Il s'agit donc d'analyser la balise CSS font-face, mais pas de les rendre.

Le site que j'ai utilisé pour convertir les polices était: http://www.kirsle.net/wizards/ttf2eot.cgi . J'ai essayé cet outil WEFT de Microsoft mais cela ne fonctionnait pas correctement. Après l’avoir installé et ouvert, il a déclaré: «La première fois que vous l’exécutez, faites ceci…», puis il a été constamment pendu.

Voici mon CSS:

@font-face
{
   font-family: 'HelveticaLTCN';
   src: url('HelveticaNeueLTCom-LtCn_0.eot');
   src: local('HelveticaNeuel TCom LtCn'), url('HelveticaNeueLTCom-LtCn_0.ttf') format('TrueType');
}

Avez-vous une idée de la raison pour laquelle IE ne restitue pas les polices?

EDIT: Doit également mentionner, j'appelle la police avec:

p .mytext
{
   font-family: HelveticaLTCN;
}
cssinternet-explorerfont-face
30
panas

Si vous avez jeté l'éponge ou si vous avez encore des difficultés avec ce problème, je fortement recommandons font squirrel . Il remplace WEFT bien mieux que tous les autres générateurs .eot en ligne. En prime, il fournit tous les formats nécessaires pour tous les navigateurs dans un seul fichier Zip, ainsi qu’une page exemple CSS + HTML en état de fonctionnement .

49
atsjr

Rappelez-vous que: les polices .eot doivent être le dernier "src". Sinon, IE réécrira la configuration et plantera la police.

@font-face {
    font-family: "Aller Bold";
    src: url(fonts/Aller_Bd.ttf) format("truetype");
    src: url(fonts/Aller_Bd.eot);
}
6
Dan Palmieri

J'ai eu les mêmes problèmes que beaucoup de gens rencontrés ici. Le problème s'est avéré simplement que IE impose une limite de caractères plus courte sur la valeur de font-family. J'ai donné à ma famille de fontes un nom plus court et cela a finalement fonctionné en utilisant le css qui a été recraché.

Bizarre!

3
Adam Bales

Internet Explorer devient un peu risqué avec les autres définitions @ font-face qui s'y trouvent. Auparavant, j’avais trouvé que c’était une aide incroyable - http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

En bref, ils recommandent le meilleur moyen est le suivant. Le seul changement consiste à ajouter un point d'interrogation à la fin de l'URL de la police. Bizarre, non?

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Un certain nombre d'autres alternatives sont répertoriées, notamment la spécification de balises @ font-face distinctes pour le fichier EOT parmi les autres.

3
Overflew

Cela a fonctionné pour moi:

@font-face {
    font-family : 'din-pro';
    src         : url('../fonts/din/DINPro-Medium.woff') format('woff');
    src         : url('../fonts/din/DINPro-Medium.otf') format('otf');
    src         : url('../fonts/din/DINPro-Medium.ttf') format('truetype');
    font-weight : 500;
    font-style  : normal;
}

@font-face {
    font-family : 'din-pro';
    src         : url('../fonts/din/DINPro-Regular.woff') format('woff');
    src         : url('../fonts/din/DINPro-Regular.woff2') format('woff2');
    src         : url('../fonts/din/DINPro-Regular.ttf') format('truetype');
    font-weight : 400;
    font-style  : normal;
}
@font-face {
    font-family : 'din-pro-ie';
    src         : url('../fonts/din/DINPro-Regular.eot?');
    font-weight : 400;
    font-style : normal;
}
@font-face {
    font-family : 'din-pro-ie';
    src         : url('../fonts/din/DINPro-Medium.eot?');
    font-weight : 500;
    font-style : normal;
}

Notez que j'ai défini la police pour IE séparément avec un suffixe -ie. Lors de l'utilisation de la police, je ferais quelque chose comme p { font-family : din-pro, din-pro-ie }. Testé et fonctionnant à partir d'IE5 en utilisant l'émulation.

3
Zankar

Une chose que vous devez vérifier est 

Le fichier .css et .eot doivent figurer dans le même dossier si vous utilisez l'URL ('HelveticaNeueLTCom-LtCn_0.eot')

ou faites un chemin complet comme src: url ( http://www.example.com/path/to/url/Helvetica.eot )

Les citations sont facultatives pour autant que je sache.

ps # Je fais de la police dans mon blog depuis longtemps, ça marche très bien.

2
YOU

La meilleure définition de font-face est:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
1
Mahmoud Saleh

Vous pouvez convertir votre police TTF aux formats modernes (c.-à-d. WOFF) en utilisant Transfonter puis utiliser un @ fort-font-face comme ceci:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Source: https://css-tricks.com/snippets/css/using-font-face/

1
Fred K

Ce qui a fonctionné pour moi est la déclaration suivante:

@font-face {
    font-family: 'Frutiger45LightBoldItalic';
    src: local('☺'), url('../font/frutiger-bolditalic-webfont.woff') format('woff'), url('../font/frutiger-bolditalic-webfont.ttf') format('truetype'), url('../font/frutiger-bolditalic-webfont.svg#webfontR2tDy7QH') format('svg'), url('../font/frutiger-bolditalic-webfont.eot');
}

Donc, il n'y a qu'un attribut src et .eot est à la fin, sans point d'interrogation.

Ce que j'ai essayé avant et qui n'a pas fonctionné:

  • mettre .eot sur une ligne séparée (avant ou après l'autre src)
  • mettre un point d'interrogation après .eot
1
bvgheluwe

Internet Explorer n'acceptera pas une police contenant une chaîne de format dans le descripteur src - cette seconde ligne src pourrait en être la cause Que se passe-t-il si vous le supprimez (ou supprimez la chaîne de format?)

Suivant - Parfois, IE peut être un peu serein quant à l'utilisation ou non de guillemets autour de valeurs en CSS. Essayez font-family: "HelveticaLTCN" à la place?

0
arcwhite

J'avais le même problème que les panas. J'ai converti de ttf en eot en utilisant onlinefontconverter.com. Eh bien, il semblerait que c’était là le problème: j’ai juste essayé de faire fontsquirrel.com comme atsjr l’a souligné et tout fonctionne bien!

0
Pere

ce code pourrait résoudre mon problème dans IE:

  @font-face {
      font-family: 'kurdish';
      src: url('font/zkurd_aras.eot?') format('eot'), url('font/zkurd_aras.woff') format('woff'), url('font/zkurd_aras.ttf') format('truetype');}
0
maikel

Tout en luttant avec un problème similaire, j'ai remarqué que la définition de DOCTYPE affectait les polices incorporées dans IE. Lorsque j'ai supprimé la définition DOCTYPE, la police s’affiche correctement.

0
cezary

Il est toujours préférable de diriger l'attribut font-face localement et non en ligne, par exemple. url ('../ fonts/font-name.eot'). IE et les autres navigateurs ne "verront" pas les polices lorsque vous exécuterez votre page Web sur un serveur local.

0
kef

Une des particularités de IE est que le nom de famille de police doit être exactement le même que celui trouvé dans les propriétés de la police. Alors que Chrome et d'autres vous permettent de nommer la famille de polices que vous voulez, ce n'est pas le cas pour IE

0
Alex