web-dev-qa-db-fra.com

Comment #iefix résout-il le chargement des polices Web dans IE6-IE8?

Beaucoup d'articles sur le Web comme celui-ci: http://www.fontspring.com/blog/fixing-ie9-font-face-problems suggère d'ajouter un ?#iefixà l'url eot. J'étais curieux de savoir comment cela va résoudre le problème. Merci.

69
vine'th

IE8 et les versions antérieures ont un bogue dans leurs analyseurs pour l'attribut src. Donc, si vous incluez plus d'un format de police dans le SRC, IE ne parvient pas à le charger et signale une erreur 404.
Le point d'interrogation résout ce problème car il trompe IE en pensant que le reste de la chaîne (autre src) est une chaîne de requête, et donc en chargeant uniquement le fichier EOT ...
Les autres navigateurs suivront les spécifications et ne chargeront que le type de police requis ...
Vous voudrez peut-être lire Paul Irish Bulletproof @ font-face syntax pour en savoir plus sur les autres pourquoi ...

81
Rexy Hoang

Vous pouvez faire n'importe quoi au lieu de ?#iefix: L'objectif de base est de mettre un ?#somethingaprès le premier fichier de police dans l'URL comme @Rexyz a déjà répondu.

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

Se rendre pleinement compte que c'est une vieille question.

Mais pour ceux qui sont venus ici à la recherche de la version de "ce" navigateur qui avait besoin de ce hack, il est maintenant sûr de la supprimer si vous ne supportez pas IE <10.

Il suffit donc de s'en débarrasser et d'avoir une seule ligne énumérant toutes les polices dans tous les formats que vous proposez.

4
user3277192

Le ?#iefix est là pour empêcher le navigateur d'interpréter les caractères après le ? en tant que chaîne de requête et empêche donc une autre erreur de serveur possible.

3
atwright147