@font-face CSS ne fonctionne ne pas avec Firefox, mais travailler avec Chrome et IE

Question

Ok, j'ai été à cette depuis quelques temps et je suis maintenant perplexe. Le code suivant fonctionne dans Google Chrome beta ainsi que IE 7. Cependant, Firefox semble avoir un problème avec cela. Je suis à la soupçonner d'être un problème de comment mes fichiers CSS sont inclus, car je sais que Firefox n'est pas trop amical cross-domain importations.

Mais c'est simplement du html statique et il n'est pas question de l'inter-domaine.

Sur mon landing-page.html -je faire un CSS à l'importation comme suit:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

Au sein de la principale.css, j'ai un autre importations de la sorte:

@import url("reset.css");
@import url("style.css");
@import url("type.css");

et au sein de la catégorie.css j'ai les déclarations suivantes:

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

J'ai un répertoire appelé "police" dans le même emplacement que le type.css. Cette police répertoire contient tous les woff/ttf/fichiers svg etc.

Je suis perplexe sur ce point. Il fonctionne dans Chrome et IE mais pas sur Firefox. Comment est-ce possible? Ce qui me manque?

Merci.

Answer 1

LOCALEMENT, L'EXPLOITATION DU SITE (file:///)

Firefox est livré avec un très stricte "uri du fichier d'origine" (file:///), la politique par défaut: pour l'avoir à se comporter comme les autres navigateurs, aller à l' about:config, filtre en fileuri et de basculer la configuration suivante:

security.fileuri.strict_origin_policy

Jeu il de faux et vous devriez être en mesure de charger une police locale des ressources chemin à travers les différents niveaux.

SITE PUBLIÉ

Comme pour mon commentaire ci-dessous, et que vous rencontrez ce problème après le déploiement de votre site, vous pourriez essayer d'ajouter un en-tête supplémentaire pour voir si votre problème se configure comme une croix de domaine en question: il ne faut pas, puisque vous êtes en précisant les chemins relatifs, mais je tente quand même: dans votre .fichier htaccess, spécifiez que vous souhaitez envoyer un en-tête supplémentaire pour chaque .ttf/.la fto/.eot fichier demandé:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Franchement, je ne m'attends pas à faire une différence, mais c'est tellement simple qu'il vaut la peine d'essayer: essayer d'utiliser l'encodage base64 pour votre police de caractères, laid, mais il peut fonctionne aussi.

Un joli récapitulatif est disponible ici

Answer 2

En plus d’ajouter ce qui suit à votre .htaccess : (Merci @Manuel)

Vous pouvez essayer d’ajouter explicitement les types mime de fois dans le fichier .htaccess... comme ceci :

En fin de compte, mon fichier .htaccess ressemble à ceci (pour la section qui permet webfonts de travailler dans tous les navigateurs)

Answer 3

J’ai eu ce problème aussi. J’ai trouvé la réponse ici : http://www.dynamicdrive.com/forums/showthread.php?t=63628

Il s’agit d’un exemple de la solution qui fonctionne sur firefox, vous devez ajouter cette ligne dans votre css de visage de polices :

Answer 4

J'ai eu exactement le même problème. J'ai dû créer un nouveau dossier appelé "polices" et le mettre dans wp_content. Je peux y accéder à partir de mon navigateur comme ceci http://www.example.com/wp-content/fonts/CANDY.otf

Auparavant, le dossier des polices a été dans le même dossier que mon fichier CSS, et le @font-face ressemblait à ceci:

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

Comme je l'ai mentionné ci-dessus, ce n'était pas de travail dans Firefox, mais uniquement avec google Chrome. Maintenant, c'est de travailler parce que j'ai utilisé un chemin d'accès absolu:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

Answer 5

J’ai eu le même problème. Vérifiez votre code pour H1, H2 ou tout style vous ciblez avec la règle @font-face. J’ai trouvé il me manquait un coma après `` il montrait bien dans tous les navigateurs en dehors de Firefox. J’ai ajouté le coma et cela a fonctionné.