icône police ne fonctionne pas dans firefox

J'essaie d'utiliser la police d'icône, jusqu'à présent, il fonctionne bien dans tous les navigateurs sauf Firefox, je ne comprends pas pourquoi, au lieu de l'icône, il montre juste la valeur qui est data-icon attribut Can quelqu'un explique pourquoi il ne fonctionne pas dans Firefox (plus tard)?icône police ne fonctionne pas dans firefox

@font-face { 
    font-family: 'icon-font'; 
    src: url('//bit.ly/ZxomPz') format('woff'), 
     url('//bit.ly/WPGMJF') format('truetype'), 
     url('//bit.ly/16eqBwn') format('eot'), 
     url('//bit.ly/16eqLDZ') format('svg'); 
} 

[data-icon]::before { 
font-family: 'icon-font'; 
font-weight: 400 !important; 
content: attr(data-icon); 
text-transform: none; 
margin-right: 3px; 
position: relative; 
top: 8px; 
right: 5px; 
font-size: 31px; 
line-height: 0; 
}

<span data-icon="1" aria-hidden="true"></span>

Source

2013-03-08 Ilja

Impossible de lier à vos polices :: Erreur (403) Il semble que vous n'appartiennent pas ici! Vous devriez probablement vous connecter. Consultez notre centre d'aide et nos forums pour obtenir de l'aide ou retourner à la maison. –

Pas de format de police SVG ?? –

@MilchePatern ajouté fichier de police .svg, ne fonctionne toujours pas. Quant à l'erreur 403, c'est parce que les polices se trouvent dans mon compte de boîte de dépôt, et pour les voir, vous devez être connecté comme moi. Mais tout va bien avec les fichiers, ça doit être quelque chose à voir avec mon balisage de police – Ilja

Voici une déclaration @ font-face a recommandé. Peut-être que vous pouvez essayer de réécrire le vôtre avec cet exemple.

@font-face { 
    font-family: 'Lobster13Regular'; 
    src: url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.eot'); 
    src: url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'), 
    url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.woff') format('woff'), 
    url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.ttf') format('truetype'), 
    url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.svg#Lobster13Regular') format('svg'); 
}

Aussi, assurez-vous de votre serveur délivre le bon 'Mime type' (TTF | FTO | EOT | WOFF) et permet l'accessibilité des ressources extérieures (Access-Control-Allow-Origin "*")

Source

2013-03-08 19:13:03

Je ne l'ai pas réparé; /, merci pour info quand même – Ilja

Access-Control-Allow-Origin "*" ??? –

Je sais que je suis en retard à la fête, mais voici une solution qui a fonctionné pour moi et je ne le vois pas dans les réponses (sauf la courte mention par @Milky façons modèles).

Créez un fichier .htaccess avec les informations suivantes et enregistrez-le dans le même dossier polices sont situées:

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

Plus d'informations ici:

Firefox est parce que Firefox ne permet pas polices inter-domaines: http://red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default/
http://alittlecode.com/font-awesome-icons-not-working-in-firefox-probable-cause-and-a-fix/

Source

2014-05-12 20:11:19

icône police ne fonctionne pas dans firefox

Répondre

Questions connexes