Czcionki CSS na Androida

Używam @font-face do wyświetlania League Gothic na stronie, ale nie wyświetla się na Androidzie 1.6. Oto Mój kod, wygenerowany za pomocą 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;

To nic wielkiego, jeśli {[1] }nie jest obsługiwane(czytałem, że @font-face Wsparcie zniknęło całkowicie w Androidzie 2). Ale League Gothic jest dość skondensowany, więc chciałbym określić lepszą czcionkę awaryjną dla Androida niż domyślną bezszeryfową, aby projekt nie pękał całkowicie.

Coś jakby to było idealne: http://www.droidfonts.com/info/droid-sans-condensed-fonts/

Ale nie mogę znaleźć ostatecznej listy domyślnych czcionek, które pochodzą z Androidem, i nazwy, której powinienem użyć, aby odwołać się do nich w CSS.

EDIT Odpowiedzi do tej pory nie trafiły w sedno (lub źle sformułowałem pytanie) - chodzi mi o listę czcionek systemowych, które wysyłają się z Androidem. Coś Jak to dla Androida.

Author: YuDroid, 2010-07-08

3 answers

Czcionki, które widzę zainstalowane w moich plikach systemowych Android (2.2) to:

    Clockopia.ttf
  • Droidsany-Śmiały.ttf
  • Droidsany.ttf DroidSansArabic.ttf Droidy się wycofują.ttf DroidSansHebrew.ttf DroidSansMono.ttf DroidSansThai.ttf DroidSerif-Śmiały.ttf DroidSerif-BoldItalic.ttf
  • DroidSerif-Italic.ttf
  • DroidSerif-Zwykły.ttf
 12
Author: Zog,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-16 09:24:14

Miałem dokładnie ten sam problem próbując zmusić webfonts do pracy na imeveryone . Jak na razie, nie wydaje się być nigdzie w Internecie, który stwierdza to bezpośrednio, więc zrobię to tutaj: {]}

składnia 'local ()' używana do zatrzymania dławienia się IE przez formaty plików IE nie obsługuje również zatrzymuje Androida przed wczytywaniem czcionek, które Android obsługuje.

O rany. Ale łatwo to naprawić. Ważne jest, aby zignorować " kuloodporne Font Face ' local IE workaround. Zgrabny hack i nie powinien niszczyć Androida, ale tak, winić Google.

Android obsługuje pliki TTF i OTF . właściwa składnia obsługująca zarówno Androida, jak i IE (i każdą inną przeglądarkę) jest następująca.

O 1) potrzebujesz dwóch oddzielnych arkuszy stylów dla czcionek, przed zwykłymi arkuszami stylów:

<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) w normalnym arkuszu stylów, używanym przez Androida i większość innych przeglądarek, nie używaj lokalnego 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. W arkuszu stylów specyficznych dla IE, Kontynuuj jak zwykle:

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

To wszystko, czego potrzebujesz, aby uzyskać działające fonty we wszystkich przeglądarkach. Na razie. pewnego dnia Google naprawi Androida, a MS naprawi IE, więc ta odpowiedź nie będzie już stosowana.

 44
Author: mikemaccana,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-20 18:00:56

Słyszałem, ale nie testowałem siebie, że metoda "Mo' Bulletproofer" opracowana przez Richarda Finka działa wokół wszystkich tych problemów (IE i Android) bez potrzeby stosowania podwójnych arkuszy stylów. Składnia jest następująca:

@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');
}
Mam nadzieję, że to pomoże!
 11
Author: Font Squirrel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-07 13:14:44