CSS шрифты на Android - PullRequest
Новая
       28

CSS шрифты на Android

14 голосов
/ 08 июля 2010

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

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

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

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

РЕДАКТИРОВАТЬ Ответы до сих пор не достигли цели (или я сформулировал вопрос плохо) - мне нужен список системных шрифтов, которые поставляются с Android.Что-то как это для Android.

Ответы [ 3 ]

44 голосов
/ 23 декабря 2010

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

Синтаксис local (), используемый для stop 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');
}

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

12 голосов
/ 16 мая 2011

Шрифты, которые я вижу установленными в моих системных файлах 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
11 голосов
/ 07 января 2011

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

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

...