在响应式CSS中使用系统字体 [英] Using system fonts in responsive css

问题描述

当我深入研究下一个响应式网站时，我正在探索为电话版本使用系统字体的选项.并且想知道一些事情.

As I delve deeper into our next responsive website, I am exploring the options of using system fonts for phone versions. And am wondering a few things.

首先是，如果我们指定设备上的字体(例如系统字体)，但是我们还调用了Open Sans(我们的默认主体字体)，那么设备仍会下载Open Sans字体吗?文件? Open Sans将在font-family声明中的系统字体之后列出.

First would be, if we specify a font that is on the device (such as a system font), but we also have an call for Open Sans (our default body typeface), would the device still download the Open Sans typeface file? Open Sans would be listed after the system fonts in the font-family declaration.

<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调用.

Or as a @font-face call.

<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字体系列声明中将使用什么名称?较新的Android很容易，因为名称只是'roboto'，但是我们如何在Windows手机上声明Segoe或在iPhone和iPad上声明Helvetica Neue/Lucinda.以及如何确定存在的字体粗细及其值(我们在Open Sans上使用400和600，因为我们不想使用真正的粗体粗字体.

If this type of set up does eliminate downloading the font and thus decreasing the data usage to view the webpage, I am wondering if someone knows the technical aspects of the system fonts. In particular what names would be used in the css font-family declaration? Newer Androids are easy as the name is simply 'roboto', but how do we declare Segoe on Windows phone or Helvetica Neue / Lucinda on iPhones and iPads. And how does one determine which font weights are present and their values (we use 400 & 600 on Open Sans because we don't want a real heavy bold font).

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

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

This really had an oh duh answer, we just set the body css to use system fonts initially (mobile first css), then when we reach the breakpoint for laptops and desktops, use the @font-face call for Open Sans and update the body css to use it.

推荐答案

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

I found the following font-family setting giving me default system fonts on all mobile devices:

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

这篇关于在响应式CSS中使用系统字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！