正文 

当前位置： 首页 > 问答 >

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

     2023-03-12     46

关键词：

【中文标题】在响应式 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 版本的专有名称。

使用现代css的响应式版面

为一个网站选择类型尺寸是项艰巨的任务.标题和段落的尺寸在网页布局和可读性方面处理起来很棘手.谢天谢地,我们有模块化缩放可以引导我们.模块化缩放是一个数字序列以某种方式关联另一个序列.TimBrown,更多版面在版面中应... 查看详情

学透css-:root+vm/vh实现响应式字体！！！(代码片段)

...文字，你要是跟我说是图片，那我只能表示：响应式网页设计中一个很难解决的问题就是文字的大小的问题了，面对千奇百怪的设备，如何解决文字的设配问题，是一个很重要的问题。在上一篇文章学透CSS... 查看详情

如何在 Bulma CSS 中为响应式设计设置基本字体大小

】如何在BulmaCSS中为响应式设计设置基本字体大小【英文标题】：HowtosetbasefontsizesinBulmaCSSforresponsivedesign【发布时间】：2019-03-0710:15:23【问题描述】：通过Bulma.iodocumentation，我找不到如何为响应式设计设置基本字体大小。根据thiss... 查看详情

如何使用 CSS 在电子邮件中添加响应式 COLLAPSIBLE 表？

】如何使用CSS在电子邮件中添加响应式COLLAPSIBLE表？【英文标题】：HowtoaddresponsiveCOLLAPSABLEtableinemailwithCSS?【发布时间】：2021-05-2117:52:14【问题描述】：我试过这个，并在普通浏览器（Chrome）中工作：带有CSS的HTML：bodymargin:0;padding... 查看详情

响应式网页设计

学习响应式网页设计需要以下几个步骤：学习基本的HTML和CSS知识，了解网页布局和样式设置。熟悉CSS媒体查询语法和使用方法，媒体查询是响应式网页设计的核心，通过媒体查询可以根据屏幕尺寸、分辨率等不同因素来设置不... 查看详情

Flutter Textfield 响应式字体

】FlutterTextfield响应式字体【英文标题】：FlutterTextfieldresponsivefont【发布时间】：2020-12-1208:40:41【问题描述】：我正在尝试使用媒体查询并尝试使用文本字段小部件。为了给容器设置样式，我尝试了盒子装饰和其他东西来添加阴... 查看详情

pc端响应式-媒体查询

媒体查询（@media）：能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果列举常用的pc屏幕宽度：1024 1280 1366 1440 1680 1920 我们可在css样式中来写，也在不同屏幕下引入相应的... 查看详情

css实现响应式布局

用CSS实现响应式布局响应式布局感觉很高大上，很难，但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询，下面就介绍一下怎么运用：使用@media的三种方法1.直接在CSS文件中使用：@media类型and(条件1)and(条件二){css样... 查看详情

用户体验与响应式字体二三事｜rem单位与flexible.jsrpx单位与css媒体查询(代码片段)

响应式页面已经趋近成熟。在视觉和前端眼中，需要着重考虑的只有一点：当可视区域变化时，是在一行中展示更多/更少的内容？还是让字体随之变化而保证在不同屏幕中展示内容不变（除非一些极端情况... 查看详情

css响应式流体排版字体大小(代码片段)

查看详情

使用 css3 的响应式设计

】使用css3的响应式设计【英文标题】：responsivedesignusingcss3【发布时间】：2017-12-0501:21:58【问题描述】：我正在尝试使用媒体查询。我在脑海中包含了metaname="viewport"content="width=device-width,initial-scale=1">和@media(min-width:768px)背景颜... 查看详情

如何在 rem 中实现响应式字体大小 - bootstrap

】如何在rem中实现响应式字体大小-bootstrap【英文标题】：Howtoimplementresponsivefontsizeinrem-bootstrap【发布时间】：2016-03-2023:40:45【问题描述】：我在我的项目中使用bootstrap3，我看到bootstrap中有2个font-size声明，如下所示：Scaffolding.less... 查看详情

移动设备的 HTML 响应式字体大小

】移动设备的HTML响应式字体大小【英文标题】：HTMLresponsivefontsizeformobiledevices【发布时间】：2013-07-2804:21:39【问题描述】：我有一个在Android和IOS上运行的应用程序。该应用程序有一些显示HTML的WebView组件从我发现有“em”和“view... 查看详情

响应式布局

使用@media的三种样式 1、直接在css文件中使用 @media类型and（条件1）and（条件2）{css样式 2、使用import导入@importurl("css/02_css_M.css")alland(mix-width:980px) 3、使用link链接，media属性用于设置查询方式 <linkrel="stylesheet 查看详情

使用 Flex CSS 和 Bootstrap 进行响应式布局

】使用FlexCSS和Bootstrap进行响应式布局【英文标题】：UsingFlexCSSandBootstrapforaresponsivelayout【发布时间】：2021-11-2401:41:57【问题描述】：我一直在尝试在台式机、平板电脑和手机尺寸之间使用完全响应式布局，但在使用下面的布局时... 查看详情

设置响应式字体大小在革命滑块jQuery插件中不起作用

】设置响应式字体大小在革命滑块jQuery插件中不起作用【英文标题】：Settingresponsivefontsizedoesn\'tworkinrevolutionsliderjQueryplugin【发布时间】：2021-04-0510:11:07【问题描述】：我正在尝试为revolutionsliderjQuery版本中的文本设置响应式font-si... 查看详情

css媒体查询响应式

媒体查询从CSS版本2开始，就可以通过媒体类型在CSS中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单1展示了一个示例。清单1.使用媒体类型<linkrel="stylesheet"type="text/css"href="site.css"media="scre... 查看详情

html5响应式（自适应）网页设计

自适应丨Html5响应式（自适应）网页设计目录自适应丨Html5响应式（自适应）网页设计第一步：在网页代码的头部，加入一行viewport元标签第二步：（注意）不使用绝对宽度，字体大小第三步：（注意）字体大小第四步：流动布局... 查看详情