Polices Web de Google n'affichant pas correctement sur IE9

Je suis en utilisant Google Web Fonts. Tous les navigateurs sont rendu à la police correctement à l'exception de IE9. (Je n'ai pas testé sur d'anciennes versions d'IE).

Voici la différence: IE 9 vs Google Chrome

HTML:

<head>
        <link href='http://fonts.googleapis.com/css?family=Yeseva+One' rel='stylesheet' type='text/css'>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>

Google Polices contenu du fichier:

@font-face {
  font-family: 'Yeseva One';
  font-style: normal;
  font-weight: 400;
  src: local('Yeseva One'), 
       local('YesevaOne'), 
       url(http://themes.googleusercontent.com/static/fonts/yesevaone/v6/wVgDKaRrT3DN9VGcOY4orxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

CSS:

.sf-menu li {
    float:left;
    position:relative;
    text-align:center;
    font-family:'Yeseva One',cursive;
    font-size:17px;
    line-height: 64px;
    border-bottom:1px solid #4A4A4A;
}

Que dois-je faire?

afficher votre code homme!
voici le code:pastebin.ca/2293999
et finissent par perdre beaucoup d'utilisateurs? Normalement, un site web doit être compatible avec tous les navigateurs, et au moins pour les nouvelles versions des navigateurs populaires
C'était plus ou moins une blague. Mais encore, je déconseille à tout le monde que je peux à partir de l'utilisation d'IE. Firefox ou Chrome est généralement mieux. Bien que IE9 est OK, mais si il était grand, il n'aurait pas besoin d'un bouton en haut de la "compatibilité"

OriginalL'auteur Ramin | 2012-12-16

4

Il n'y a toujours pas suffisamment de renseignements au sujet de la situation, mais il semble que vous testez la page en local sur IE 9. Dans ce cas, si vous regardez les outils de développement (F12), une partie de Console, vous verrez un CSS3317 message d'erreur. Il est dit que @font-face a échoué en raison de la restriction d'accès au site.

Ce qui se passe sur IE 9 uniquement en “Mode standard”, mais c'est ce que vous obtenez lorsque vous utilisez un meta tag dans votre code.

Le problème, c'est juste un développeur de nuisance (sauf si vous créez une application HTML qui est censé fonctionner sur les systèmes des utilisateurs localement, comme une application téléchargée – dans ce cas, inclure les fichiers de police dans l'ensemble de la demande). Lorsque vous télécharger les fichiers sur un serveur HTTP et de test à partir de là, le problème n'apparaît pas.

Ajouté: Démo qui fonctionne bien sous IE 9, même en mode standard, mais si vous le télécharger et l'ouvrir localement sur IE 9, il échoue (vous voyez la police de secours, Courrier); puis, dans les outils de développement, si vous définissez le Document en Mode Quirks, il fonctionne à nouveau. Google vous recommande d'utiliser les polices comme hébergé par Google, mais il offre également des téléchargements et a très permissive règles d'utilisation. Cependant, les liens de téléchargement normalement vous donner juste une TTF fichier (zip), si vous avez besoin d'utiliser des services comme FontSquirrel pour générer les autres formats.

Si vous pouvez mettre en place une démo où on peut le voir, j'ai peut-être mangez-corneille, parce que ce n'est pas familier (et IE9 est considéré comme un navigateur moderne?). Je devrais peut-être d'abord passé en arrière et de lire ma propre réponse. Ehh. Bien que, il ya quelques bonnes choses là... :P Et sur une autre note, vous pouvez télécharger et de servir de Google fichiers de Police?
Bien. Caveat emptor. Du bon travail.

OriginalL'auteur Jukka K. Korpela

Vous devez vous connecter pour publier un commentaire.