android - 在响应式 CSS 中使用系统字体

Question

随着我深入研究我们的下一个响应式网站，我正在探索为手机版本使用系统字体的选项。我想知道一些事情。

首先，如果我们指定了设备上的字体(例如系统字体)，但我们也调用了 Open Sans(我们的默认正文字体)，设备是否仍会下载 Open Sans 字体文件？ Open Sans 将列在字体系列声明中的系统字体之后。

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
<style type="text/css">
    body { font-family: roboto, segoe, helvetica, 'open sans', sans-serif; }
</style>

或者作为@font-face 调用。

<style type="text/css">
    @font-face {font-family:OpenSans; src: url('https://fonts.gstatic.com/s/opensans.woff'); }
    body { font-family: roboto, segoe, helvetica, 'open sans', sans-serif; }
</style>

如果这种类型的设置确实消除了下载字体并因此减少了查看网页的数据使用量，我想知道是否有人了解系统字体的技术方面。特别是在 css font-family 声明中会使用什么名称？较新的 Android 很简单，因为名称只是“roboto”，但我们如何在 Windows 手机上声明 Segoe 或在 iPhone 和 iPad 上声明 Helvetica Neue/Lucinda。以及如何确定存在哪些字体粗细及其值(我们在 Open Sans 上使用 400 和 600，因为我们不想要真正的粗体字体)。

用我们的解决方案更新问题....

这确实有一个oh duh 答案，我们只是将 body css 设置为最初使用系统字体(移动优先 css)，然后当我们到达笔记本电脑和台式机的断点时，使用@font -face 调用 Open Sans 并更新 body css 以使用它。

Answer 1

我发现以下字体系列设置为我提供了所有移动设备上的默认系统字体:

font-family: system,-apple-system,".SFNSText-Regular","San Francisco",Roboto,"Segoe UI","Helvetica Neue","Lucida Grande",sans-serif;