在响应式 css 中使用系统字体

Posted 2023-03-12

【中文标题】在响应式 css 中使用系统字体

【英文标题】：Using system fonts in responsive css

【发布时间】：2015-01-03 09:59:18

【问题描述】：

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

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

<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 声明中将使用什么名称？较新的机器人很简单，因为名称只是“roboto”，但我们如何在 Windows 手机上声明 Segoe 或在 iPhone 和 iPad 上声明 Helvetica Neue / Lucinda。以及如何确定存在哪些字体粗细及其值（我们在 Open Sans 上使用 400 和 600，因为我们不想要真正的粗体字）。

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

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

【问题讨论】：

在 Smashing Magazine 上有一篇关于该主题的文章：smashingmagazine.com/2015/11/…

【参考方案1】：

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

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

【参考方案2】：

这个 css sn-p（借用自 issue on github）默认为系统字体，在大多数平台（OSX、ios、Windows、Windows Phone、android、Ubuntu）上：

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;

-apple-system — Safari 中的旧金山（在 Mac OS X 和 iOS 上）；旧版 Mac OS X 上的 Neue Helvetica 和 Lucida Grande。 system-ui — 给定平台上的默认 UI 字体。 BlinkMacSystemFont — 相当于 -apple-system，适用于 Mac OS X 上的 Chrome。 "Segoe UI" — Windows (Vista+) 和 Windows Phone。 Roboto — Android（Ice Cream Sandwich (4.0)+）和 Chrome 操作系统。 Ubuntu — 所有版本的 Ubuntu。

可以在article on css-tricks 中找到其他操作系统或更旧版本的字体。

【参考方案3】：

如果您声明 body font-family: roboto, segoe, helvetica, 'open sans', sans serif; 并且用户的设备安装了一种名为 roboto 的字体，并且它包含内容中所有字符的字形，那么字体系列列表的其余部分应该 被忽略。这意味着如果其中一些字体被声明为带有@font-face 的可下载字体（直接或间接通过使用 Google 提供的代码），则不应进行下载。但是，如果该字体中不存在任何字符，则应进一步处理列表，如果列表中没有前面的字体包含该字符，则这将导致字体下载。

实际上，浏览器可能会以不同的方式实现这一点，例如他们可能总是加载可下载的字体，或者如果系统中存在列表中的任何前面的字体，即使它没有覆盖所有字符，他们也可能无法下载它。您需要为每个浏览器组织合适的测试，以准确了解它们的行为方式。一般来说，如果你声明了一个可下载的字体，你应该期望它被下载，你应该把它放在font-family列表的第一位以确保这一点。

关于具体的字体名称，声明segoe是没有用的。没有这样的字体； Segoe UI 存在于许多 Windows 系统中。名称helvetica 原则上意味着一种字体，主要仅在Apple 设备上可用，但在实践中，奇怪的是，Windows 将其视为Arial，除非系统实际安装了Helvetica。声明sans serif 是没有用的；没有这样的字体；您可能指的是sans-serif，这是系统相关无衬线字体的有效名称。

【讨论】：

谢谢。是的，sans-serif 中缺少的连字符是一个错字。并感谢 Windoss 的名称 - Segeo UI。现在我需要的是 iPhone 和 iPad 使用的 Helvetica（Neue 或类似的）和 Lucinda 版本的专有名称。