android - CSS android 字体粗细 :lighter not working

Question

我知道已经有一些修复，但它们似乎都不起作用。

我想在我的网站上使用 font-weight:300 的“Helvetica Neue”。在桌面上看起来一切都很好，但是一旦我切换到安卓，似乎没有浅色字体。

Here你可以在 jsbin.com 上看到我的测试。随意编辑，在我的 Galaxy S3 和 Nexus 4 上，字体都具有相同的粗细。

如您所见，我还尝试包含 roboto 并将其设置为灯光，但这也不起作用(使用了更多方法但不想为每个方法都制作一个额外的 H1)。

我的测试用例:

<h1 class="neue">Does not work</h1>
<h1 class="neueLight">Does not work</h1>
<h1 class="neueLighter">Does not work</h1>

使用这个 CSS:

h1.neue {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 300;
}

h1.neueLight {
  font-family: "HelveticaNeue-Light", "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 300;
}

h1.neueLighter {
  font-family: "HelveticaNeue-Light", "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: lighter;
}

这有效(仅适用于 android 4.2+):

关于如何在不导入字体或使用谷歌字体的情况下使用特定的浅色字体，似乎没有解决方案。

解决方案是使用 sans-serif-light 作为第一个 font-family 字体。

最好的解决方案是这样的:

html:

<h1>Headline</h1>

CSS:

h1 {
  font-family: sans-serif-light,"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 300;
}

Answer 1

Helvetica Neue 在大多数设备上不可用，包括 Android(安装了少量字体)。

关于 Roboto，您似乎要求权重 100，但您的 link 元素仅使用权重 300。而且你指的是 WOFF 版本的字体，很多 Android 版本都不支持。