Шрифты CSS на Android

Question

Я использую @font-face, чтобы отобразить лигу Gothic на веб-сайте, но она не отображается на Android 1.6. Вот мой код, генерируется с 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; 

Это не имеет большого значения, если @font-face не поддерживается (я читал, что поддержка @font-face ушла полностью в Android 2). Но лига Gothic довольно сжата, поэтому я хотел бы указать лучший альтернативный шрифт для Android, чем стандартный sans-serif, поэтому дизайн не полностью сломается.

Нечто подобное было бы идеально: http://www.droidfonts.com/info/droid-sans-condensed-fonts/

Но я не могу найти окончательный список шрифтов по умолчанию, которые поставляются с Android, и имя, которое я должен использовать, чтобы ссылаться на них в CSS.

EDIT Ответов до сих пор пропустили точку (или я сформулировать вопрос плохо) - то, что я после того, как список системных шрифтов, которые поставляются с Android. Что-то like this для Android.

Answer 1

Шрифты, которые я вижу, установлены на моем Android (2.2) системные файлы:

• 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

У меня была точно такая же проблема, пытаясь заставить webfonts работать на imeveryone. В настоящее время, как представляется, не быть где-нибудь в Интернете, что говорит об этом прямо, так что я буду делать это здесь:

«локальный) (» синтаксиса, используемый для stop IE choking on file formats IE doesn't support также stops Android from loading fonts that Android does support.

О, дорогой. Но это легко фиксируется. Важно не обращать внимание на локальное обходное решение IE «Bulletproof Font Face». Это аккуратный взлом, и он не должен ломать Android, но он виноват в Google.

Android does support TTF and OTF Файлы. Достаточно синтаксис для поддержки Android и IE (и любого другого браузера) выглядит следующим образом:.

O 1) Вам нужны два отдельных таблицы стилей для шрифтов, до каких-либо регулярных стилей:

<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) В нормальных стилях, используемых Android и большинство других браузеров, не используйте местный хак:

@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. В конкретных стилей IE, по-прежнему, как обычно:

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

Это все, что вам нужно, чтобы получить рабочие веб-сайты во всех браузерах. На данный момент. Когда-нибудь Google исправит Android и MS исправит IE, поэтому этот ответ больше не будет применяться.

Answer 3

Я слышал, но не испытал, что метод "Mo' Bulletproofer", разработанный Ричардом Финком, обо всех этих проблемах (IE и Android) не требует двойных таблиц стилей. Синтаксис:

@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'); 
} 

Надеюсь, это поможет!