web-dev-qa-db-fra.com

Police Awesome non affichée sur Windows Phone 8

J'ai un site de test qui utilise la police Font Awesome pour afficher des icônes.

Les icônes s'affichent correctement sur mon bureau sous IE et Chrome, ainsi que sur les appareils mobiles iPhone et Andriod.

Toutefois, les icônes de police ne sont pas affichées sur un Nokia Lumia 920 Windows Phone 8.

Je ne peux pas comprendre ce qui cause le problème. Les autres sites dotés de l'icône Police Awesome s'affichent correctement sur le Nokia Lumia 920 Windows Phone. Par conséquent, il doit y avoir quelque chose de spécifique à la configuration que j'ai créée.

Le site de test est: http://www-peachtreedata.azurewebsites.net/?page_id=6

Tout conseil sur la façon de faire fonctionner cela sur la plate-forme Windows Phone serait apprécié.

csswindows-phone-8
18
Richard West

Il s’agit d’une situation où le problème observé n’est qu’un symptôme du problème réel. J'ai eu le même problème avec mon propre site. Mais il s’est avéré que ce n’est pas le problème de Windows Phone, mais que IIS 7 - 8.1 signale le mauvais type MIME pour les fichiers de polices Web. Assurez-vous que les bons types MIME sont servis pour vos fichiers de polices, comme indiqué ici: Type MIME approprié pour les polices

De plus, si vous utilisez Windows Azure Storage pour vos polices, vous devez définir le type MIME sur chaque fichier manuellement. La manière la plus simple de procéder pour les fichiers existants consiste à utiliser l'un des nombreux éditeurs frontaux de stockage Azure.

HTH

7
Robert McLaws

J'ai réussi à faire reconnaître mon jeu de polices/d'icônes par Windows Phone 8 à l'aide de base64. Assurez-vous d’utiliser les polices WOFF et TTF comme suit (où * sont les longues chaînes base64):

@font-face {
    font-family: 'icomoon-ac';
    src: url(data:application/x-font-woff;charset=utf-8;base64,***) format('woff'),
        url(data:application/x-font-ttf;charset=utf-8;base64,***) format('truetype');
    font-weight: normal;
    font-style: normal;
}

UPDATE: Ce sujet a de nouveau été abordé dans Hacker News. Permettez-moi de développer ici mon article original au cas où cela aiderait les autres: 1) J'ai seulement essayé icomoon et 2 ) j’ai utilisé seulement 1 police intégrée.

J'utilise jqMobi, maintenant appelé Intel App Framework, pour créer un site Web mobile destiné à tous les principaux navigateurs mobiles. Le framework jqMobi inclut ~ 70 icônes de icomoon intégrées dans ses CSS. J'avais besoin d'un peu plus, alors j'ai d'abord essayé d'étendre cela en créant un autre fichier de police appelé icomoon-extra, en le téléchargeant sur http://www.motobit.com/util/base64-decoder-encoder.asp to produire la chaîne base64 et ajouter un autre @ font-face au CSS jqMobi. Cela n'a pas fonctionné pour moi, alors j'ai simplement créé un nouveau fichier icomoon-ac qui inclut la plupart des icônes originales de la sélection jqMobi icomoon, ainsi qu'une autre trentaine d'icônes dont j'avais besoin. Maintenant, je viens d'utiliser ma police icomoon-ac dans le cadre et cela fonctionne. Encore une fois, une seule police intégrée.

3
carrabino

CSS @font-face ne fonctionne pas de manière fiable dans Windows Phone IE.

Les polices à icônes telles que Font Awesome reposent sur le chargement d'un fichier de polices approprié à partir d'un serveur distant. Apparemment, il n'est pas possible de charger des polices supplémentaires à l'aide de @font-face sous Windows Phone. En fonction de la source, c'est le cas uniquement pour Windows Phone 7, voire pour la version 8:

  • Microsoft indique que les polices Web ne fonctionnent pas sur 7.1
  • Ce SO fil , et un autre signale des problèmes sur 7.5, mais peut être un indice pour des solutions possibles
  • Dans les commentaires de cet article , il est indiqué que même les polices codées en Base64 ne fonctionnent pas dans un émulateur. Si je trouve le temps, je le testerai sur un vrai téléphone (7.5).
  • Même modernizr a quelques problèmes avec cela

Sidenote: sur mon Windows Phone, Microsoft.com est affiché avec Tahoma, la deuxième police de la pile:

 font-family: wf_SegoeUI, Tahoma, Verdana, Arial, sans-serif;

Drôle, car Windows phone dispose d’une copie locale de Segoe UI . Je me demande pourquoi les internautes de MS ne mettent pas cette seconde dans la pile ...

2
bhell

Cela peut être corrigé dans la mise à jour 8.1:

"À partir de la mise à jour Internet Explorer pour Windows Phone 8.1, Internet Explorer sur Windows Phone autorise le chargement de polices d'origine croisée, quels que soient les en-têtes de contrôle d'accès, pour une compatibilité améliorée avec les sites existants" [1]

1
robocat

D'accord, c'est ce qui a fonctionné pour moi sur IIS7.5. J'ai dû ajouter les types MIME .otf, .svg et .woff à IIS, car ils n'existaient pas encore. Pour ajouter un nouveau type MIME dans IIS, cliquez sur MIME types module, cliquez avec le bouton droit de la souris et choisissez Add....

    .eot -> application/vnd.ms-fontobject
    .otf -> application/font-sfnt
    .svg -> image/svg+xml
    .ttf -> application/font-sfnt
    .woff -> application/font-woff
0
Flo