webentwicklung-frage-antwort-db.com.de

@ font-face-Deklarationen funktionieren in Android 4.3-Internetbrowsern nicht?

Mein Samsung Galaxy S3-Handy wurde kürzlich von Android 4.1.3 auf Android 4.3 aktualisiert. Auf einigen von mir erstellten Websites, die ich im Android-Internetbrowser getestet habe, werden keine mit @font-face deklarierten Schriftarten angezeigt. Was muss ich tun, um dies zu beheben?

Eine der Sites (Entwicklungsversion): http://beta.kdfansite.com

Hier ist einige der verwandten CSS für Open Sans:

@font-face {
    font-family: 'OpenSansSemibold';
    src: url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot');
    src: url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.woff') format('woff'),
         url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ... */

h2 {
    font-family: 'OpenSansSemibold', Arial, sans-serif;
    /* ... */
}

Jede Schriftart, die ich auf der Website verwende, wird auf ähnliche Weise deklariert. Die Great Vibes-Deklaration (auch in custom.css) für die Nachricht "enjoy your ride" ist eine weitere zu vergleichende. Alle Schriftarten werden in Chrome für Android und Firefox für Android auf demselben Gerät ordnungsgemäß angezeigt, jedoch nicht im Android-Internet.

Ich muss dieses CSS so schnell wie möglich fertig stellen und arbeite an diesem Projekt als Freiwilliger (nicht bezahlt). Daher suche ich eher nach einer schnellen Lösung als nach einer Codeüberprüfung. Ich bin auch ein UX-Designer, kein Webentwickler. Danke im Voraus.

Edit: Ich habe heute in Edge Inspect CC und weinre ein zusätzliches Debugging durchgeführt und sowohl mein Android-Handy als auch mein iPad mit meinem Laptop verbunden. In Weinre kann ich die Schriftfamilien auf dem iPad ändern, aber nicht auf dem Telefon. Ich kann die Schriftfarben auf beiden Geräten ändern. Es scheint also, dass das zugrunde liegende Problem mit der Tatsache zusammenhängt, dass ich die Schriften in den Standardeinstellungen nicht ändern kann, wenn ich einen Remote-Debugger verwende.

16
David

Ich habe das gleiche Problem hier, wie ich es löse.

Ich verwende svg auf mobilen Geräten nur mit Medienabfragen.

@media only screen and (max-width: 320px) {
@font-face {
    font-family: 'open_sansbold';
    src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
}
@media only screen and (max-device-width: 720px) and (orientation:portrait) {
    @font-face {
        font-family: 'open_sansbold';
        src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }

}
@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
    @font-face {
        font-family: 'open_sansbold';
        src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}

Ich hoffe es hilft dir.

18
Beauceron

Wir sind auf ein ähnliches Problem gestoßen, das durch die Verwendung von text-rendering: optimizeLegibility verursacht wurde. Wenn Sie das aus unserem CSS entfernen, arbeiten unsere Schriften wieder mit 4.3. 

20
BenV

Ich erstelle jsfiddle mit nur svg und woff-Schriftarten und teste sie auf meinem Android 4.3-Gerät im Standardbrowser. Alles funktioniert.

Ich entferne einfach alle unnötigen Schriften für Handys. Alle mobilen unterstütztsvg-Schriftarten, FF und IE10 benötigenwoff. So können Sie Medienabfragen zur separaten Definition der Schriftart verwenden: für Mobilgeräte und für den Desktop.

Wenn Sie alle Arten von Schriftarten benötigen, überprüfen Sie Ihren Content-Type-Header auf Schriftartdateien. Es ist immer text/plain, was falsch ist:

  • eot hat application/vnd.ms-fontobject Typ
  • otf und ttf haben application/octet-stream type
  • woff hat den Typ application/font-woff
  • svg hat image/svg + xml Typ

Überprüfen Sie auch this page, um bekannte häufige Probleme mit font face zu lesen.

2
Pinal

Sie können vielleicht auch Beacourons Lösung für das Abfragen von mobilen Medien verwenden, dies kann jedoch schwierig sein, wenn Sie verschiedene Android-Tablet-Auflösungen verwenden möchten.

Eine andere Idee ist die Verwendung eines Webkit-Browsers mit Media-Query-Targets wie folgt:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'open_sansbold';
        src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}
1
Mathew Porter

Ich hatte zuvor ein ähnliches Problem und löste es, indem ich font-weight: normal !important; zu den Elementen/Text hinzufügte, die die Schrift verwendeten. Ich glaube, das Problem war, dass die Schriftstärke von den Elementen vererbt wurde und dies dazu führte, dass die Schrift fehlschlug. Hoffe, es funktioniert :)

Also in deinem Code:

h2 {
    font-family: 'OpenSansSemibold', Arial, sans-serif;
    font-weight: normal !important;
    /* ... */
}
1
tnt-rox