如何在浏览器中仅通过CSS使用Android原生字体而不使用Web字体？

Question

我正在尝试制作一个Web应用程序，但不使用Web字体来保持浏览器请求的最少。同时，我正在尝试仅使用“好看”的纤细字体用于标题等。这基本上没有问题：iOS和Mac OS原生具有HelveticaNeue-UltraLight，而Windows（Phone）具有Segoe UI（WP）Light字体。虽然这些字体看起来不同，但它们给出了类似的整体风格，我不需要使用单个Web字体。所有这些都可以直接通过css "font-family"属性来处理。是否有一种方法在Android上获得类似的外观？Android有Roboto Light字体，完全可以满足我的要求，但似乎无法简单地通过css样式进行处理而不使用Web字体。

- tomcat

---

问题已在此回答：https://dev59.com/tWw15IYBdhLWcg3wIYO_#22555625 - Mahendran

Answer 1

您可以使用

标签

。

font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;

每个操作系统在运行时尝试使用此列表中的字体。当浏览器找到系统中存在的字体时，它将开始使用它。iOS将使用字体“HelveticaNeue-UltraLight”，并忽略其他字体。Android将使用字体“Roboto Light”...

- Anon

---

谢谢你的回答！但是我已经尝试过这个方法了，但它并没有起作用。至少在我的Nexus 7和HTC One上不行（我在两台设备上尝试了不同的浏览器）。不幸的是，Android只使用默认的无衬线字体。 - tomcat

你必须知道系统中字体的确切名称。上面只是一个例子。 - Anon

是的，我知道，我已经研究并尝试了不同的字体名称，但似乎无法通过css来调用Roboto。（除非我从外部资源或自托管的Web字体中显式地包含它...这似乎有点多余，因为Android已经安装了该字体...我只是不能在浏览器中使用它。） - tomcat

也许这可以帮助你：https://dev59.com/JGUq5IYBdhLWcg3wSOfR 或者这个：http://anton.averin.pro/2012/09/12/how-to-use-android-roboto-font-in-honeycomb-and-earlier-versions/ - Anon

Answer 2

使用：

font-family: sans-serif-light;

编辑：显然，这只适用于HTC设备。但这是一个开始。

编辑2：看起来谷歌在最近的Android 4.4更新中进行了更改，因为现在它也可以在我的Nexus 7上使用。不确定其他设备是否也适用。

- tomcat

Answer 3

下载 Roboto 并在 CSS 中像这样链接：

@font-face { 
  font-family: 'Roboto Thin';
  src: url('roboto/Roboto-Thin.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

- MaxBoden

---

我知道，无论如何感谢你的回答。我的问题是我想避免使用CSS @font-face声明。这种字体已经安装在每个新的Android设备上了。因此，应该可以在不依赖于Web字体的情况下使用它。但显然不行。（例外：HTC设备，请参见下面的我的答案。） - tomcat