Question

对于那些感兴趣的人来说，这是一个很好的挑战：

我们知道Roboto字体有 thin 版本，这种字体通常可以通过CSS使用font-weight: lighter或权重值小于400来指定。

使用font-weight: 200; font-family: Roboto;规则，我们让Android上的Firefox选择要显示的正确版本的字体，以及主要的桌面浏览器（如果存在此类字体）。

Android上的Chrome有不同的想法：它总是选择Roboto 常规字体。

好吧，也许Chrome不喜欢语法，让我们尝试一些替代方案：

font-weight: lighter; font-family: Roboto;
font-family: 'Roboto Thin';
font-weight: 200; font-family: 'Roboto Thin';

不，Chrome仍然更喜欢常规版本。

这个怎么样？

@font-face {
    font-family: "Roboto";
    font-weight: 200;
    src: local("Roboto-Thin");
}

font-family: Roboto;
font-weight: 200;

可悲的是，因为它变成了一个错误，标记为无法修复：http://code.google.com/p/chromium/issues/detail?id=322658

现在，该团队提供了另一种选择：

@font-face {
    font-family: "Roboto";
    font-weight: 200;
    src: local("sans-serif-thin");
}
font-family: Roboto;
font-weight: 200;

在我们的测试设备（OS 4.1.2与Chrome稳定版/测试版）上，这一点都不可行。

现在房间里的大象正在回退到网络字体，这在Chrome测试版中确实有效，因为它们已在http://code.google.com/p/chromium/issues/detail?id=167557中修复了

但是使用默认系统字体的Web字体后备似乎相当奇怪。此外，它确实会导致额外的下载和延迟内容显示。

所以我想知道是否有人有更好的解决方法来解决这个问题？

测试用例：

Answer 1

我使用了使用font-weight 300的Google网络字体，并使用'Roboto'作为字体名称而没有问题：

来自http://www.google.com/fonts

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>

<style>
body {
    font-family: 'Roboto', sans-serif;
}
</style>

Answer 2

我的错误： Roboto Thin 不确实存在于Android 4.1上（说实话我不确定它是否在4.4中，因为没有文档提到它）

所以不要被http://developer.android.com/design/style/typography.html误导，实际的字体列表位于api doc：http://developer.android.com/about/versions/android-4.1.html#Fonts，其中Thin不存在。

现在很明显只有 Roboto Light 存在，我再次尝试了上述解决方案，而Chromium团队的建议是唯一可行的解决方案：

@font-face {
    font-family: "Roboto";
    font-weight: 200;
    src: local("sans-serif-light");
}
font-family: Roboto;
font-weight: 200;

这将使firefox和chrome都使用正确的字体，而不会有任何webfont后备。

Android上的Chrome，字体粗细不符合系统字体

2 个答案: