Android上的CSS字体

Question

我正在@font-face网站上展示League Gothic,但它并没有出现在Android 1.6上.这是我用Font Squirrel的@ 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-faceAndroid 2 中的支持完全消失了).但是联盟哥特式是非常浓缩的,所以我想为Android指定一个比默认的sans-serif更好的后备字体,所以设计并没有完全破解.

这样的事情将是完美的:http: //www.droidfonts.com/info/droid-sans-condensed-fonts/

但我找不到Android附带的默认字体的确切列表,以及我应该用它来在CSS中引用它们的名称.

编辑 到目前为止答案错过了重点(或者说我严重的问题) - 我所追求的是Android附带的系统字体列表.事情是这样的Android.

Answer 1

我有一个完全相同的问题,试图让webfonts在imeveryone上工作.截至目前,互联网似乎没有任何地方直接说明这一点,所以我会在这里做:

用于阻止IE文件格式IE阻塞的'local()'语法不支持也会阻止Android加载Android支持的字体.

噢亲爱的.但它很容易修复.重要的是忽略'Bulletproof Font Face'本地IE解决方法.这是一个整洁的黑客,不应该破坏Android,但它确实,责怪谷歌.

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和大多数其他浏览器使用的普通样式表中,不要使用本地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.在IE特定样式表中,继续正常:

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

这就是在所有浏览器中使用webfonts所需的全部内容.目前.有一天谷歌将修复Android和MS将修复IE,所以这个答案将不再适用.

Answer 2

我在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 3

我听说过,但是没有测试过自己,Richard Fink开发的"Mo'防弹装置"方法解决了所有这些问题(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');
}

希望这可以帮助!