CSS Schriften auf Android

Question

Ich verwende @font-face Liga Gothic auf einer Website angezeigt werden, aber es zeigt nicht auf Android 1.6 auf. Hier ist mein Code, erzeugt mit Font Squirrel's @font-face generator

@font-face { 
    font-family: 'LeagueGothicRegular'; 
    src: url('/fonts/League_Gothic-webfont.eot'); 
    src: local('☺'), url('/fonts/League_Gothic-webfont.woff') format('woff'), url('/fonts/League_Gothic-webfont.ttf') format('truetype'), url('/fonts/League_Gothic-webfont.svg#webfont') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

font-family:'LeagueGothicRegular',Impact,Charcoal,sans-serif; 

Es ist keine große Sache, wenn @font-face nicht unterstützt wird (ich gelesen, dass @font-face Unterstützung vollständig in Android ist weg 2). Aber Liga Gothic ist ganz kondensiert, so würde Ich mag einen besseren Ausweich Schrift für Android angeben als das Standard-sans-serif so das Design nicht vollständig brechen.

So etwas wäre perfekt: http://www.droidfonts.com/info/droid-sans-condensed-fonts/

Aber ich kann keine endgültige Liste der Standard-Schriftarten, die mit Android kommen, und der Name sollte ich verwenden, um auf sie verweisen in CSS finden.

EDIT Die Antworten bisher den Punkt verpasst (oder ich die Frage schlecht formuliert) - was ich bin, ist nach einer Liste von System, das Schiff mit Android-Schriften. Etwas like this für Android.

Answer 1

Die Schriftarten, die ich in meinem Android installiert sehe (2.2) Systemdateien sind:

• Clockopia.ttf
• DroidSans-Bold.ttf
• DroidSans.ttf
• DroidSansArabic.ttf
• DroidSansFallback.ttf
• DroidSansHebrew.ttf
• DroidSansMono.ttf
• DroidSansThai.ttf
• DroidSerif-Bold.ttf
• DroidSerif-BoldItalic.ttf
• DroidSerif-Italic.ttf
• DroidSerif-Regular.ttf

Answer 2

Ich hatte genau das gleiche Problem versucht Webfonts zu arbeiten auf imeveryone. Ab jetzt scheint es nicht überall im Internet zu sein, die diese direkt erklärt, also werde ich es hier tun:

‚Local()‘ Syntax stop IE choking on file formats IE doesn't support verwendet auch stops Android from loading fonts that Android does support.

Sanitäter behandeln. Aber es ist leicht zu beheben. Wichtig ist, dass Sie die lokale IE-Problemumgehung "Bulletproof Font Face" ignorieren. Es ist ein ordentlicher Hack und sollte Android nicht brechen, aber es tut Google verantwortlich.

Android does support TTF and OTF Dateien. Die richtige Syntax sowohl Android und IE (und alle anderen Browser) glücklich ist zu unterstützen, wie folgt.

O 1) Sie müssen zwei separate Stylesheets für Schriften, vor allen regulären Stylesheets:

<link rel="stylesheet" type="text/css" href="/css/fonts.css" /> 
<!--[if IE]> 
    <link rel="stylesheet" href="/css/styleiefonts.css}" type="text/css" charset="utf-8" /> 
<![endif]--> 

O 2) Im normalen Stylesheet, verwendet von Android und die meisten anderen Browsern nicht verwenden der lokale Hack:

@font-face { 
    font-family: 'LeagueGothicRegular'; 
    src: url('/static/fonts/League_Gothic-webfont.woff') format('woff'), 
     url('/static/fonts/League_Gothic-webfont.ttf') format('truetype'), 
     url('/static/fonts/League_Gothic-webfont.svg#webfontOTINA1xY') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

O 3. In dem speziellen Stylesheet IE, weiterhin als normal:

@font-face { 
    font-family: 'LeagueGothicRegular'; 
    src: url('/static/fonts/League_Gothic-webfont.eot'); 
} 

Das ist alles, was Sie brauchen, um Webfonts über alle Browser zu erhalten. Zur Zeit. Ein Tag wird Google Android beheben und MS wird IE beheben, so dass diese Antwort wird nicht mehr gelten.

Answer 3

Ich habe gehört, aber habe mich nicht selbst getestet, dass die von Richard Fink entwickelte Methode "Mo' Bulletproofer" alle diese Probleme (IE und Android) ohne die Notwendigkeit für doppelte Stylesheets funktioniert. Die Syntax lautet:

@font-face{ /* for IE */ 
font-family:'LeagueGothicRegular'; 
src:url(fishy.eot); 
} 
@font-face { /* for non-IE */ 
font-family: 'LeagueGothicRegular'; 
src:url(http://:/) format("No-IE-404"),url('/fonts/League_Gothic-webfont.woff') format('woff'), url('/fonts/League_Gothic-webfont.ttf') format('truetype'), url('/fonts/League_Gothic-webfont.svg#webfont') format('svg'); 
} 

Hoffe, das hilft!