CSS шрифты на Android

Я использую @font-face для отображения League Gothic на веб-сайте, но он не отображается на Android 1.6. Вот мой код, сгенерированный с помощью шрифт белка @font-face генератор

@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). Но League Gothic довольно сжата, поэтому я хотел бы указать лучший резервный шрифт для Android, чем по умолчанию sans-serif, поэтому дизайн не полностью ломать.

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

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

редактировать Ответы до сих пор пропустили точку (или я сформулировал вопрос плохо) - то, что мне нужно, - это список системных шрифтов, которые поставляются с Android. Что-то!--19-->как это для Android.

14
android css font-face

3 ответов

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

  • Clockopia.ttf
  • DroidSans-Смелый.ttf
  • DroidSans.ttf
  • DroidSansArabic.ttf
  • DroidSansFallback.ttf
  • DroidSansHebrew.ttf
  • DroidSansMono.ttf
  • DroidSansThai.ТЦФ
  • DroidSerif-Смелый.ttf
  • DroidSerif-BoldItalic.ttf
  • DroidSerif-Italic-Курсив.ttf
  • DroidSerif-Регулярные.ttf
12

у меня была точно такая же проблема, пытаясь заставить webfonts работать на imeveryone. На данный момент, кажется, нет нигде в интернете, который заявляет об этом напрямую, поэтому я сделаю это здесь:

синтаксис "local ()" используется для stop IE choking on file formats IE не поддерживает и останавливает Android от загрузки шрифтов, которые Android поддерживает.

- О дорогая. Но это легко исправить. Этот важно игнорировать "пуленепробиваемое лицо шрифта" локальное обходное решение IE. Это аккуратный Хак и не должен ломать Android, но это так, вините Google.

Android поддерживает TTF и OTF файлы. The правильный синтаксис для поддержки Android и IE (и любого другого браузера) happy выглядит следующим образом.

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

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

44

Я слышал, но не проверял сам, что " 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');
}

надеюсь, что это помогает!

11