IE8 Renders poids des polices au hasard

Question

Sur une page web dans IE8 J'ai 4 polices personnalisées en CSS à l'aide de font-face, deux de chaque font à la même famille pour les poids gras et normal. J'ai trouvé que IE8 rend aléatoire le non gras en gras et parfois vice versa. Si je suis assis à la page en appuyant sur actualiser chaque fois qu'il charge les changements de texte, apparemment au hasard.

J'ai même essayé de faire en sorte que javascript définisse les polices pour les éléments seulement après que tout soit chargé - et cela se produit toujours.

Quelqu'un sait ce qui se passe?

Answer 1

J'ai rencontré le même problème lors de l'utilisation de plusieurs poids et styles d'une seule police dans IE8. Typekit a un article qui explique ce bogue dans IE8 et ci-dessous: Using multiple weights and styles

Selon eux:

« Internet Explorer 6, 7, 8 & charge un maximum de quatre poids par famille De plus, en utilisant deux closely-. les poids associés (par exemple, 400 et 500) peuvent entraîner un seul chargement de poids correctement. "

L'utilisation de la variation spécifique semble être le moyen de résoudre ce problème. Comme si (extrait de kit de polices Web Myfonts.com):

@font-face { 
    font-family: 'AvenirNextLTPro-DemiIt'; /* Demibold Italic */ 
    font-style: italic; 
    font-weight: 600; 
    src: url('webfonts/25A826_1_0.eot'); 
    src: url('webfonts/25A826_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/25A826_1_0.woff') format('woff'),url('webfonts/25A826_1_0.ttf') format('truetype'); 
} 

@font-face { 
    font-family: 'AvenirNextLTPro-BoldIt'; /* Bold Italic */ 
    font-style: italic; 
    font-weight: 700; 
    src: url('webfonts/25A826_6_0.eot'); 
    src: url('webfonts/25A826_6_0.eot?#iefix') format('embedded-opentype'),url('webfonts/25A826_6_0.woff') format('woff'),url('webfonts/25A826_6_0.ttf') format('truetype'); 
} 

 

.someclass { 
    font-family: 'AvenirNextLTPro-DemiIt'; /* Demibold Italic */ 
    font-style: italic; 
    font-weight: 600; 
} 
.otherclass { 
    font-family: 'AvenirNextLTPro-BoldIt'; /* Bold Italic */ 
    font-style: italic; 
    font-weight: 700; 
}