网站定制字体：探索Web字体的选择与应用

时间：11-17 民间故事提交错误

老铁们，大家好，相信还有很多朋友对于网站定制字体：探索Web字体的选择与应用和的相关问题不太懂，没关系，今天就由我来为大家分享分享网站定制字体：探索Web字体的选择与应用以及的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！

正文从这里开始。

各大网站最新 font-family

作为一个前端的习惯，在浏览各种网站的时候，总是喜欢时不时的打开开发者工具，回顾一下元素。我看了一下一些知名网站的font-family移动端：

天猫：font-family: "苹果SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif; Github: font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica, Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;CSS-Tricks: font-family: system-ui,-apple-system ,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,sans-serif,苹果色表情符号，segoe ui 表情符号，segoe ui 符号；有趣的是，像system-ui、-apple-system、BlinkMacSystemFont等早年在font-family中几乎看不见的字体定义现在已经很常见了。这些是什么？是特定的字体吗？

字体基础知识

在继续之前，我们先简要回顾一下有关字体的一些基础知识。

衬线字体与无衬线字体

就Web上常用的一些字体而言，一般分为衬线字体和无衬线字体。

衬线字体-- 关键字是serif，表示衬线字体。衬线是指在字符笔画的末尾有额外的带有小细节的装饰，称为衬线，并且笔画的粗细会有所不同。这些细节在大写字母中尤其明显。

image无衬线字体-- 关键字是sans-serif，表示无衬线。特指西文字体中的无衬线字体，对应中文字体中的粗体。与通常机械且统一的衬线字体相比，它们往往具有相同的曲率、直线和尖角。

在中文中，无衬线字体是黑体字体，也称为方形字体或等值线字体。无衬线装饰，字体端庄，横竖笔划，所有字迹粗细一致。

关于字体的基础知识，推荐阅读这篇你应该了解的字体文章：font-family

font-family 关键字

对于CSS 中的font-family，它有两种类型的值。

其中一种类型具体是这样的字体族名定义：font-family: Arial在这里定义了一种特定的字体风格，字体家族被命名为Arial；

一个是通用字体族名，这是一种后备机制，用于在指定字体不可用时提供更好的字体，如下所示：font-family: sans-serif。

其中，sans-serif代表无衬线字体家族，例如‘Open Sans’、‘Arial’‘微软雅黑’等。

关于通用字体族名，在CSS Fonts Module Level 3 -- Basic Font Properties中定义了5个，这是我们熟悉的几个常见的字体家族名称：

serif 衬线字体家族sans-serif sans-serif 字体家族monospace 等宽字体，即字体中的每个字都具有相同的宽度草书草书字体幻想主要是那些具有特殊艺术效果的字体

新增通用字体族关键字

以及在CSS Fonts Module Level 4 中- - 通用字体系列中添加了几个新关键字：

system-ui系统默认字体emoji用于兼容emoji表情符号数学，适合数学表达式仿宋。该字体系列用于中文（仿宋）字体。我们来看看最常用的system-ui。

system-ui

简单来说，font-family: system-ui的目的就是在不同操作系统的网页上自动选择本操作系统下的默认系统字体。

默认使用特定操作系统的系统字体可以提高性能，因为浏览器或webview不必下载任何字体文件，而是使用现有的字体文件。 font-family: system-ui字体设置的优点是与当前操作系统使用的字体相匹配，可以得到文本内容最合适的显示。

San Francisco Fonts

OK，我们对system-ui字体家族有了一个简单的了解。但像-apple-system 和BlinkMacSystemFont 这样的东西并没有出现在最新的标准中。它们是什么意思？

在此之前，我们先来了解一下San Francisco 字体。

San Francisco Fonts，也称为San Francisco 字体，是一种西班牙语字体。随着iOS 9 更新的推出，它会在WatchOS 中与Apple Watch 一起悄悄发布，并且还将在Apple TV 上的新tvOS 中提供。

San Francisco Fonts 用于替换和升级iOS 系统上的另一种西班牙语字体Helvetica Neue。苹果做出了一些重要的改变，使其成为平台上更好、甚至更完美的西班牙语字体。

图片

-apple-system/BlinkMacSystemFont

话虽如此。每个前端开发人员都知道，将功能纳入规范是一回事，将其纳入浏览器则是另一回事。

幸运的是，system-ui 正在迅速流行。 Chrome 和Safari 在各个平台上都完全支持它。只有Mozilla 和Windows 落后。

看看system-ui的兼容性，Can i Use --system-ui（图片截取日期2019-08-13）：

图片仔细看上图最后两行：

支持作为-apple-system 值（仅在macOS 和iOS 上）支持作为BlinkMacSystemFont 值（仅在macOS 上）考虑到不同平台和向后兼容性，在macOS 和iOS 上，我们需要使用-apple-system 和BlinkMacSystemFont。与system-ui标准兼容。

Segoe UI

Segoe UI 是从Vista 开始的Windows 默认西方字体系列。它只支持西文字符，不支持中文字符，并且是无衬线字体。

它还代表一个系列而不是单一字体。使用font-family: Segoe UI 选择Windows 平台和Windows Phone 上最佳的西文字体显示。

Roboto

Roboto 是专为Android 操作系统设计的无衬线字体系列。谷歌将这种字体描述为“现代，但平易近人”和“情感化”。

该字体系列包括六种粗细：Thin、Light、Regular、Medium、Bold 和Black，以及匹配的斜体。

总结一下

至此，我们可以总结一下了。以CSS-Tricks网站的font-family定义为例：

{

字体系列：

系统用户界面，-苹果系统，BlinkMacSystemFont，segoe ui，Roboto，

黑体、Arial、

无衬线字体、苹果色表情符号、Segoe ui 表情符号、Segoe ui 符号；

}system-ui，在每个支持的平台上使用默认系统font-apple-system。在某些较低版本的Mac OS 上Francisco FontsBlinkMacSystemFont，对于Mac OS 上的某些Chrome 浏览器在不同平台上设置默认系统字体后，针对某些低版本浏览器的降级解决方案sans-serif 是一种掩盖解决方案，以确保字体风格统一。至少必须是上述五个字体家族定义的无衬线字体。优先级从高到高。最后，你可以看到这五个都不是特定的字体。基本核心思想是选择对应平台上的默认系统字体。

涵盖iOS、MAC OS X、Android、Windows、Windows Phone等基本上用户常用的所有主流操作系统。

使用系统默认字体的主要原因是性能。字体通常是网站上最大/最重的加载资源之一。如果我们可以使用用户计算机上已有的字体，则根本不需要获取字体资源，从而显着加快加载时间。

而系统字体的好处就是与当前操作系统所使用的字体相匹配，所以它的文字显示也必须是舒适的显示效果。

当然，上面对font-family的定义并不一定是最好的。比如天猫在前面加了‘苹果SC’、miui、……。一定有他们的商业考虑。不过，一些fallback方案同样具有向后兼容的思想，值得借鉴。