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

问题描述 投票：1回答：3

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

首先，如果我们指定设备上的字体（例如系统字体），但我们也调用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'，但我们如何在iPhone手机上宣布Segoe或在iPhone和iPad上宣布Helvetica Neue / Lucinda。如何确定存在哪些字体权重及其值（我们在Open Sans上使用400和600，因为我们不需要真正的粗体字体）。

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

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

android ios css windows-phone-8 fonts
3个回答
3
投票

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

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

在大多数平台（OSX，iOS，Windows，Windows Phone，Android，Ubuntu）上，此css片段（从issue on github借用）默认为系统字体：

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;
  • -apple-system - Safari中的旧金山（在Mac OS X和iOS上）; Neue Helvetica和Lucida Grande在旧版Mac OS X上使用。
  • system-ui - 给定平台上的默认UI字体。
  • BlinkMacSystemFont - 相当于-apple-system，适用于Mac OS X上的Chrome。
  • qazxsw poi - Windows（Vista）和Windows Phone。
  • "Segoe UI" - Android（Ice Cream Sandwich（4.0）+）和Chrome OS。
  • Roboto - 所有版本的Ubuntu。

可以在此Ubuntu中找到其他操作系统或其旧版本的字体。

0
投票

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

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.