web-dev-qa-db-fra.com

CSS @ font-face ne fonctionne pas dans IE8

J'ai essayé de lire plusieurs articles sur la gestion des polices personnalisées dans IE, mais ils ne semblaient jamais fonctionner pour moi. J'ai essayé de convertir les polices en EOT, mais cela ne semblait pas fonctionner non plus. Je ne suis pas sûr de ce que je fais mal, alors je posterai mon code

@font-face {
  font-family: "Klavika Regular";
    src: url('../fonts/klavika.eot');
    src: local('☺'), url('../fonts/klavika.woff') format('woff'), url('../fonts/klavika.ttf') format('truetype'), url('../fonts/klavika.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
27
hackshockr

cela fonctionne dans ie8/9 

http://dev.bowdenweb.com/a/fonts/serif/alegreya/demo.html

@font-face {
    font-family: 'AftaserifRegular';
    src: url('AftaSerifThin-Regular-webfont.eot');
    src: url('AftaSerifThin-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('AftaSerifThin-Regular-webfont.woff') format('woff'),
         url('AftaSerifThin-Regular-webfont.ttf') format('truetype'),
         url('AftaSerifThin-Regular-webfont.svg#AftaserifRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
40
albert

si IE8 pense il prend en charge tout autre format que eot parmi ceux répertoriés ci-dessous, il essaiera probablement de l'utiliser. Peut-être que vous pourriez utiliser un hack IE8, comme 

src: local('☺'), url('../fonts/klavika.woff') format('woff'), url('../fonts/klavika.ttf') format('truetype'), url('../fonts/klavika.svg') format('svg');
src /*\**/: url('../fonts/klavika.eot')\9

ainsi, seul IE8 lira la dernière ligne src et chargera ainsi le fichier .eot.

0
Naoise Golden

Essayez trois types de formats CSS pour @ font-face sur FontSquirrel Generator (en mode "EXPERT ..."> dans la section "Formats CSS:"> "pour plus d'informations")

0
fine

Cela vaut la peine de vérifier si votre fichier .htaccess autorise le type de fichier.

0
magicspon