web-dev-qa-db-fra.com

La famille de polices Wingdings ne semble pas fonctionner sur Firefox et Opera

J'utilisais la police Wingdings dans le CSS pour certains symboles comme un crayon et une icône d'accueil.

Cela a fonctionné sur IE, Chrome et Safari mais pas dans Firefox et Opera. Je l'ai googlé mais je n'ai pas trouvé de meilleure solution.

Pourquoi ça ne marche pas dans Firefox? J'ai besoin d'utiliser ces icônes, existe-t-il un moyen d'utiliser Wingdings dans Firefox?

htmlcssfirefoxoperafont-family
34
niko

Mozilla et Opera sont conformes à la norme. Wingdings n'est pas standard (quelle surprise venant de Microsoft) car il n'est pas mappé à Unicode, et ne doit donc jamais être utilisé sur un site Web.

Cependant, ne désespérez pas, la plupart des symboles sont disponibles en Unicode: vérifiez http://www.alanwood.net/demos/wingdings.html

Addendum important (octobre 2014): Depuis nicode v7 , sorti le 16 juin 2014, tous les personnages de Webdings et Wingdings ont été ajoutés à Unicode. Voir le commentaire ci-dessous.

41
mddw

Vous pouvez utiliser des caractères Unicode tels que

✎

http://www.fileformat.info/info/unicode/char/270e/index.htm

14
Joseph Marikle

Les caractères Wingdings peuvent être accessibles de manière compatible Unicode, via la "Zone d'utilisation privée" (codepoints U+E000 à U+F7FF). Ces codes de caractères sont réservés à tous les symboles spécifiques à une police ne faisant pas partie du jeu de caractères Unicode standard, et Wingdingds mappe en effet tous ses symboles à la sous-gamme U+F021 à U+F0FF.

Par exemple, le drapeau triangulaire, qui est mappé sur P = 0x50 dans le codage hérité, accessible via U+F050 = =  (HTML) = \F050 (CSS).

Je ne suis pas sûr des autres navigateurs, mais cela fonctionne dans Firefox 12.

5
Christoph Lipka

Pour citer un site Web:

Il y a eu un débat sans fin entre les gens qui ont dit que Mozilla devrait prendre en charge la police de symboles dans sa configuration par défaut, car c'est une capacité précieuse et les avocats des normes ont dit non, car ils pensaient que le support violait la norme HTML. Jusqu'à présent, les obstructionnistes ont prévalu.

http://hutchinson.belmont.ma.us/tth/Wfonts.html

2
orangething
@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }

plus ici http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

solution simple dans votre HTML

<style type="text/css">
@font-face {
    font-family: "Ace Crikey";
    src: url(ace.ttf);
}
.ace {
    font-family: "Ace Crikey";
    font-size: 230%;
}
</style>
0
Grumpy

Vous pouvez utiliser Gimp ou un autre logiciel graphique et créer des GIF des icônes nécessaires à partir de la police Wingdings.

0
Eddy Freddy