wake-up-neo.com

Schriftart Awesome wird unter Windows Phone 8 nicht angezeigt

Ich habe eine Testseite, auf der die Schriftart Awesome zum Anzeigen von Symbolen verwendet wird.

Die Symbole werden auf meinem Desktop in IE und Chrome sowie auf dem iPhone und den mobilen Geräten von Andriod angezeigt.

Die Zeichensymbole werden auf einem Nokia Lumia 920 Windows Phone 8 jedoch nicht angezeigt.

Ich kann nicht herausfinden, was das Problem verursacht. Andere Websites mit dem Font Awesome-Symbol werden auf dem Nokia Lumia 920 Windows Phone korrekt angezeigt. Deshalb muss das Setup, das ich erstellt habe, spezifisch sein.

Die Testseite ist: http://www-peachtreedata.azurewebsites.net/?page_id=6

Jeder Ratschlag, wie dies auf der Windows Phone-Plattform zum Laufen gebracht werden kann, würde sich freuen.

18
Richard West

Dies ist eine Situation, in der das beobachtete Problem nur ein Symptom des tatsächlichen Problems ist. Ich hatte das gleiche Problem mit meiner eigenen Website. Es stellte sich jedoch heraus, dass dies nicht das Problem von Windows Phone ist, sondern dass IIS 7 - 8.1 den falschen MIME-Typ für Web-Font-Dateien bereitstellt. Stellen Sie sicher, dass die richtigen MIME-Typen für Ihre Schriftdateien bereitgestellt werden, wie hier gezeigt: Richtiger MIME-Typ für Schriftarten

Wenn Sie Windows Azure Storage für Ihre Schriftarten verwenden, müssen Sie den MIME-Typ für jede Datei manuell festlegen. Der einfachste Weg, dies für vorhandene Dateien zu tun, besteht in einem der zahlreichen Front-End-Editoren von Azure Storage.

HTH

7
Robert McLaws

Ich konnte meinen Font/Icon so einstellen, dass er von Windows Phone 8 mit base64 erkannt wird. Stellen Sie sicher, dass Sie WOFF- und TTF-Schriftarten wie folgt verwenden (wobei * die langen base64-Zeichenfolgen sind):

@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: Dieses Thema wurde in den Hacker News wieder aufgegriffen. Lassen Sie mich hier meinen ursprünglichen Beitrag erläutern, falls er anderen hilft: 1) Ich habe nur icomoon probiert und 2 ) Ich habe nur 1 eingebettete Schrift verwendet.

Ich verwende jqMobi, jetzt Intel App Framework genannt, um eine mobile Website zu erstellen, die auf alle gängigen mobilen Browser abzielt. Das jqMobi-Framework enthält ~ 70 Icons von icomoon, die in sein ui-CSS eingebettet sind. Ich brauchte ein paar mehr, also habe ich zunächst versucht, das zu erweitern, indem ich eine andere Schriftartdatei namens icomoon-extra erstellt und sie nach http://www.motobit.com/util/base64-decoder-encoder.asp hochlade Erzeugen Sie den base64-String und fügen Sie dem CSS von jqMobi ein weiteres @ font-face hinzu. Das hat für mich nicht funktioniert, also habe ich einfach eine neue icomoon-ac-Datei erstellt, die die meisten der ursprünglichen Icons aus der jqMobi-icomoon-Auswahl sowie weitere ca. 30 Icons enthält, die ich brauchte. Jetzt verwende ich einfach meine icomoon-ac-Schriftart im Framework und es funktioniert. Wieder nur 1 eingebettete Schrift.

3
carrabino

CSS @font-face funktioniert nicht zuverlässig in Windows Phone IE.

Symbol-Schriftarten wie Font Awesome setzen das Laden einer entsprechenden Schriftartdatei von einem Remote-Server voraus. Anscheinend ist es nicht möglich, zusätzliche Schriftarten mit @font-face unter Windows Phone zu laden. Je nach Quelle ist dies nur für Windows Phone 7 oder sogar für Version 8 der Fall:

  • Microsoft sagt , dass Webfonts unter 7.1 nicht funktionieren
  • Dieser SO - Thread und ein anderer berichtet über Probleme in 7.5, kann jedoch Hinweise auf mögliche Lösungen geben
  • In den Kommentaren von diesem Beitrag wird angegeben, dass selbst Base64-codierte Schriftarten in einem Emulator nicht funktionieren. Wenn ich die Zeit finde, werde ich dies auf einem echten Telefon testen (7.5).
  • Sogar modernizr hat einige Probleme damit

Eine Randbemerkung: Auf meinem Windows Phone wird Microsoft.com mit Tahoma, der zweiten Schriftart im Stapel, angezeigt:

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

Lustig, da Windows Phone eine lokale Kopie der Segoe UI zur Verfügung hat . Ich frage mich, warum die Web-Leute bei MS diese Sekunde nicht in den Stapel legen ...

2
bhell

Dies kann in 8.1 Update behoben werden:

"Ab Internet Explorer für Windows Phone 8.1 Update ermöglicht Internet Explorer unter Windows Phone das Laden von Cross-Origin-Schriften unabhängig von den Zugriffssteuerungsheadern, um die Kompatibilität mit vorhandenen Websites zu verbessern." [1]

1
robocat

Ähnlich wie bei der Antwort von @flo kann ich bestätigen, dass die folgenden MIME-Typen in IIS7.5 unter Windows Server 2008R2 das Problem beheben:

    .eot -> application/octet-stream
    .otf -> application/font-sfnt
    .svg -> image/svg+xml
    .ttf -> application/octet-stream
    .woff -> application/font-woff
0

Okay, das hat bei IIS 7.5 funktioniert. Ich musste die MIME-Typen .otf, .svg und .woff zu IIS hinzufügen, da sie noch nicht vorhanden waren. Klicken Sie zum Hinzufügen eines neuen MIME-Typs zu IIS auf MIME types-Modul, klicken Sie mit der rechten Maustaste und wählen Sie Add....

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