web-dev-qa-db-fra.com

Firefox ne peut pas rester sur les icônes de Font Awesome webfont set

Dans Firefox (Windows 7), les icônes et les glyphes appelés à partir du package Font Awesome ne sont pas restitués correctement. Un exemple de ceci peut être vu sur le site Web de Khan Academy. Au-dessous de la vidéo, les icônes sont affichées sous forme de zones contenant des codes hexadécimaux. Cela signifie qu'il n'est pas téléchargé par Firefox.

How the icons appear in Firefox

Comment il apparaît sur Chrome (Windows 7), Safari (Mac OS X) et Stainless (Mac OS X):

How the icons appear in other browsers

J'ai trouvé cette question sur Stack Overflow qui peut expliquer pourquoi cela se produit - le CSS utilise des guillemets simples pour entourer l'emplacement src de la police. Cependant, je n'ai aucun accès en écriture aux serveurs de Khan Academy, je ne peux donc pas modifier le site Web actuel. Je veux savoir si cela peut être corrigé dans Firefox, et comment. Je peux exécuter des scripts Greasemonkey si cela peut aider. J'ai déjà essayé de télécharger manuellement la police et de l'ajouter au dossier des polices de Windows, mais cela n'aide pas.

Pour référence, le CSS qui définit cette police (non traité correctement par Firefox) est:

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

[class^="icon-"]:before,
[class*=" icon-"]:before
{
  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  display:inline-block;
  text-decoration:inherit
}

Mise à jour: J'ai constaté que Firefox affiche correctement les icônes basées sur les polices du site Web du package Font Awesome (lien ci-dessus). Après inspection du CSS et comparaison avec le CSS de Khan Academy, je constate que les deux codes sont exactement les mêmes sauf que il n’ya pas de point-virgule après le dernier attribut du CSS de KA (si vous ignorez le fait que c'est compressé). Le manque de point-virgule pose-t-il ce problème?

firefoxfonts
20
ADTC

Le problème décrit dans la question a été résolu par Khan Academy en modifiant tous les chemins de ./ à /fonts/ (par exemple, ./fontawesome-webfont.ttf est remplacé par /fonts/fontawesome-webfont.ttf). Il me semble que Firefox ne peut pas lire les fichiers du répertoire spécial "dot" (qui fait simplement référence au répertoire actuel).

PS: L'absence de point-virgule dans le code CSS après le dernier attribut ne cause pas ce problème .

Commentaires supplémentaires:

Votre modification concernant le préfixe . est un problème de serveur, et non de savoir comment Firefox traite les fichiers. KA faisait référence aux fichiers de polices à partir du mauvais emplacement - aléatoire

Incorrect! Les polices ont fonctionné correctement dans trois autres navigateurs, comme je l'avais déjà mentionné il y a longtemps, ce qui signifie que les polices se trouvaient au bon emplacement. C'était clairement le problème de Firefox avec le chemin ./ comme je l'ai expliqué, ce qui a obligé KA à déplacer les fichiers de polices vers un nouvel emplacement qui n'a pas besoin de ./, permettant ainsi à Firefox de lire correctement les fichiers de polices. C'est pourquoi est un problème de gestion des fichiers par Firefox.

12
ADTC

Probablement pas la réponse à la question posée, mais suffisamment liée pour aider les personnes qui se retrouvent ici avec un problème légèrement différent qui produit le même résultat que celui illustré dans les captures d'écran.

Firefox bloquant l'utilisation d'une police se trouvant sur un (sous) domaine différent

Lisez également les commentaires sur ces articles, ils donnent de bons conseils.

1
Pim Schaaf

J'ai modifié le chemin pour exécuter correctement IE, Firefox et Chrome, comme suit: ( URL à voir )

@font-face{
  font-family:'FontAwesome';
  src:url('ogi/bete/font/fontawesome-webfont.eot?v=3.0.1');
  src:url('/ogi/bete/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), 
  url('/ogi/bete/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  url('ogi/bete/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal }
0
Herson Tamin