Android 上的 CSS 字体

CSS fonts on Android

提问by Ben

I'm using @font-faceto display League Gothic on a website, but it's not showing up on Android 1.6. Here's my code, generated with Font Squirrel's @font-face generator

我正在使用@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;

It's not a big deal if @font-faceisn't supported (I read that @font-facesupport is gone completely in Android 2). But League Gothic is quite condensed, so I would like to specify a better fallback font for Android than the default sans-serif so the design doesn't completely break.

如果@font-face不支持，这没什么大不了的（我读到@font-faceAndroid 2 中完全没有支持）。但是 League Gothic 非常简洁，所以我想为 Android 指定一种比默认的 sans-serif 更好的后备字体，这样设计就不会完全中断。

Something like this would be perfect: http://www.droidfonts.com/info/droid-sans-condensed-fonts/

像这样的东西会很完美：http: //www.droidfonts.com/info/droid-sans-condensed-fonts/

But I can't find a definitive list of the default fonts that come with Android, and the name I should use to reference them in CSS.

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

EDITThe answers so far missed the point (or I worded the question badly) - what I'm after is a list of system fonts that ship with Android. Something like thisfor Android.

编辑到目前为止的答案没有抓住重点（或者我的问题措辞很糟糕） - 我所追求的是 Android 附带的系统字体列表。事情是这样的Android。

采纳答案by Zog

The fonts that I see installed in my Android (2.2) system files are:

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

• 时钟.ttf
• DroidSans-Bold.ttf
• DroidSans.ttf
• DroidSansArabic.ttf
• DroidSansFallback.ttf
• DroidSansHebrew.ttf
• DroidSansMono.ttf
• DroidSansThai.ttf
• DroidSerif-Bold.ttf
• DroidSerif-BoldItalic.ttf
• DroidSerif-斜体.ttf
• DroidSerif-Regular.ttf

回答by mikemaccana

I've had the exact same issue trying to get webfonts to work on imeveryone. As of now, there doesn't seem to be anywhere on the internet that states this directly, so I'll do it here:

我在尝试让 webfonts 在imeveryone上工作时遇到了完全相同的问题。截至目前，互联网上似乎没有任何地方直接说明这一点，所以我会在这里做：

The 'local()' syntax used to stop IE choking on file formats IE doesn't supportalso stops Android from loading fonts that Android does support.

用于阻止 IE 在 IE 不支持的文件格式上阻塞的“local()”语法也阻止了 Android 加载 Android 支持的字体。

Oh dear. But it's easily fixed. The important thing is to ignore the 'Bulletproof Font Face' local IE workaround. It's a neat hack, and shouldn't break Android, but it does, blame Google.

哦亲爱的。但它很容易修复。重要的是忽略“Bulletproof Font Face”本地 IE 解决方法。这是一个巧妙的黑客，不应该破坏Android，但它确实，责怪谷歌。

Android does support TTF and OTFfiles. The proper syntax to support both Android and IE (and every other browser) happy is as follows.

Android 确实支持 TTF 和 OTF文件。支持 Android 和 IE（以及所有其他浏览器）的正确语法如下。

O 1) You need two separate style sheets for fonts, before any regular style sheets:

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) In the normal style sheet, used by Android and most other browsers, don't use the local hack:

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. In the IE specific style sheet, continue as normal:

O 3. 在 IE 特定的样式表中，照常继续：

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

That's all you need to get working webfonts across all browsers. For now. Someday Google will fix Android and MS will fix IE, so this answer won't apply anymore.

这就是在所有浏览器中使用 webfonts 所需的全部内容。目前。总有一天 Google 会修复 Android，而 MS 会修复 IE，所以这个答案不再适用。

回答by Font Squirrel

I've heard, but haven't tested myself that the "Mo' Bulletproofer"method developed by Richard Fink works around all these issues (IE and Android) without the need for double stylesheets. The syntax is:

我听说过，但我自己没有测试过，Richard Fink 开发的“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');
}

Hope this helps!

希望这可以帮助！