firefox @font-face échouer avec fontawesome

Je suis en utilisant le FontAwesome de la police sur un OSS application que je suis en cours et je n'arrive pas à obtenir le passé de Firefox police de désinfectant.

Les fichiers sont tous servis dans le même domaine, les chemins d'accès sont corrects, et je suis sur le css de FontAwesome qui fonctionne dans Firefox lorsqu'il est servi par l'intermédiaire de leur site et de locaux docs.

Donc je doit manquer quelque chose de simple.

url: https://bmark.us

[11:39:02.945] downloadable font: invalid version tag (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0)
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot @ http://127.0.0.1:6543/static/css/responsive.css
[11:39:02.945] downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0)
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot @ http://127.0.0.1:6543/static/css/responsive.css

Sont des exemples de Firefox erreurs quand j'ai essayer de corriger cela par dev. J'ai essayé de faire les chemins de la racine /static/police et par rapport à la css ../police/et il échoue toujours avec ces erreurs pour moi.

Tout fonctionne dans Chrome et autres. Il semble que Firefox me déteste. J'ai cherché à travers les autres réponses et j'ai toute une série de polices.

https://github.com/mitechie/Bookie/tree/develop/bookie/static/font

Merci pour tous les conseils.

OriginalL'auteur Rick | 2012-06-17

  1. 8

    Merci, c'était un problème.

    La deuxième partie vient en premier. L'exemple de css à partir de la fontawesome.scss utilise des guillemets simples autour de l'chemins des différents formats de police. Quand j'ai couru mon scss builder (pyscss), il a dépouillé. Ils doivent être entre guillemets.

    Puisqu'il n'y avait pas de guillemets, FF pas réussi à analyser la src: url(...) bits. Car elle n'est pas qu'il n'avait que la src: ..eot qui est censé pour IE avoir et ça ne fonctionne pas dans FF.

    Changer les guillemets guillemets doubles tout fait heureux.

    Donc c'est de ma faute en utilisant pyscss et c'est de l'analyseur qui a fini par briser la syntaxe pour Firefox.

    Grâce Matt pour m'aider à y regarder de plus près à ce.

    J'ai eu les mêmes erreurs, mais des citations n'étaient pas un problème. Ma solution a été de re-convertir les polices dans le fichier TTF dans le fontsquirrel.com/tools/webfont-generator et puis re-télécharger. Ensuite, les erreurs ont disparu.

    OriginalL'auteur Rick

  2. 3

    A) Êtes-vous sûr que votre serveur a la des types mime ensemble pour eot/woff/ttf/svg??
    B) On dirait que vous êtes en cours d'exécution pour un problème avec l'EOT. qui pourrait être expliqué par le fait que Firefox ne prend pas en charge EOTs; il utilise WOFF et TTF.
    C) Avez-vous essayé de débogage à l'aide de Firebug ou de Firefox natif outils de développement?
    D) vous Pouvez poster votre (pertinent) le CSS et le HTML?

    Merci, c'était un problème. La deuxième partie vient en premier. L'exemple de css à partir de la fontawesome.scss utilise des guillemets simples autour de l'chemins des différents formats de police. Quand j'ai couru mon scss builder sur eux, il les a dépouillé. Ils doivent être entre guillemets. Puisqu'il n'y avait pas de guillemets, FF pas réussi à analyser la src: bit. Car elle n'est pas qu'il n'avait que la src: ..eot qui est censé pour IE avoir et ça ne fonctionne pas dans FF. Changer les guillemets guillemets doubles tout fait heureux.
    génial! bonne prise, Rick.
    En fait, dans Firefox, le header Content-Type est ignoré. developer.mozilla.org/en-US/docs/Web/CSS/@font-face#Notes

    OriginalL'auteur Matt Rose

  3. 3

    Dans mon cas, c'était assez de place .eot/.woff/.svg/.fichiers ttf dans le même *.la guerre de fichiers que d'autres contenus statiques(css, png, etc.) est placé. Ressemble FF et IE trouvé le téléchargement des fichiers de police à partir d'autres serveurs dangereux.

    OriginalL'auteur Majek

  4. 3

    J'ai rencontré le même problème sur un de mes sites clients.

    @font-face {
 font-family: 'SourceSansProBlack';
  src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot');
  src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format('embedded-opentype'),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format('woff'),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format('truetype'),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format('svg');
}

    Ci-dessus a travaillé dans firefox. Celui-ci n'a pas fonctionné. 

    @font-face {
 font-family: 'SourceSansProBlack';
  src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot');
  src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format(embedded-opentype),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format(woff),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format(truetype),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format(svg);
}

    Il s'avère que les spécificateurs de format besoin d'être cité comme format('svg'). Certains des feuilles de style css servi par les sites de ne pas citer les spécificateurs de format. J'ai expérimenté avec le chemin d'accès à la fois unique et avec des guillemets, et qui n'a fait aucune différence. Donc, je peux dire que c'est le problème avec les non cotées les spécificateurs de format plutôt que le double/single cité chemins.

    OriginalL'auteur dors