Подтвердить что ты не робот

Шрифты CSS на Android

Я использую @font-face для отображения Лиги Готики на веб-сайте, но это не отображается на Android 1.6. Здесь мой код, созданный с помощью Font Squirrel @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.

ИЗМЕНИТЬ Ответы до сих пор не хватало точки (или я неправильно сформулировал этот вопрос) - то, что мне нужно, - это список системных шрифтов, которые поставляются с Android. Что-то как это для Android.

4b9b3361

ОТВЕТЫ

Ответ 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

Ответ 2

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

Синтаксис 'local()', используемый для остановить IE, удушающий форматы файлов, IE не поддерживает также останавливает Android от загрузки шрифтов, поддерживаемых Android.

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

Android поддерживает файлы TTF и 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');
}

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

Ответ 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');
}

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