Web font font-family again Quest

Original: Web font font-family again Quest

Prior wrote an article about Web fonts introduction and use of skills:

You know the font-Family font .

The article basically no font selection and analysis of many mobile terminals. And it took so long, today's Web fonts, there has been something new, then there is this article.

Text from here.

The latest major sites font-family

As the front end of a habit, when browsing various sites always like to open the Developer Tools from time to time to review elements of it. I looked at some of the more well-known sites mobile terminal font-family:

Lynx :font-family: "PingFang 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,apple color emoji,segoe ui emoji,segoe ui symbol;

Interestingly, similar system-ui, -apple-system, BlinkMacSystemFont and so in a few years ago font-family almost did not see the font definition now very common. What are they? Is a specific fonts?

Font Basics

Before continuing, we briefly review some basics about fonts.

Serif and sans serif

Web fonts on some commonly used terms, in fact, is largely divided into serif and sans serif.

Serif font - keywords serif, meaning serif fonts, serif mean additional decoration is called serifs of small details in the stroke end of the character, and stroke thickness will vary in the details particularly evident in capital letters.

Sans-serif font - keywords sans-serif, sans serif that is the meaning. Western not specifically refers serif font, and font bold characters correspond. Contrary to serif font, such fonts are usually mechanically and uniform lines, they tend to have the same curvature, straight lines, sharp corners.

The Chinese, is sans serif bold, bold square is known as body or the like lines, without serifs decorated, glyph dignified, smooth vertical and horizontal strokes, handwriting all the same thickness.

Basic knowledge of fonts, it is recommended to look at this you know the font font-family

font-family Keywords

For the CSS font-family is concerned, it has two types of values.

One is like this specific font family name Definition: font-family: Arial This defines a specific font style, font family called Arial;
One is generic font family name, which is an alternative mechanism for giving a better font when the specified font is not available, like this: font-family: sans-serif .

Wherein sans-serif the table sans serif font family, e.g., "Open Sans", "Arial " " Microsoft elegant black" and so on.

About generic font family name in CSS Fonts Module Level 3 - Basic Font Properties , the definition of five, and is known in several generic font family name:

serif serif font family
sans-serif sans serif font family
monospace font width, i.e., each word in the same font width
cursive cursive font
font fantasy mainly those with special artistic effects

New generic font family keywords

In the CSS Fonts Module Level 4 - Generic font families , add a few keywords:

system-ui system default font
emoji characters for compatibility emoji emoticons
math applies mathematical expression
fangsong this font family for the Chinese (italics) font.

We take a look at the most used system-ui.

system-ui

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

默认使用特定操作系统的系统字体可以提高性能，因为浏览器或者 webview 不必去下载任何字体文件，而是使用已有的字体文件。 font-family: system-ui 字体设置的优势之处在于它与当前操作系统使用的字体相匹配，对于文本内容而言，它可以得到最恰当的展示。

San Francisco Fonts

OK，简单了解了 system-ui 字体族。但是像 -apple-system、BlinkMacSystemFont 没有在最新的标准里出现。它们又代表什么意思呢？

在此之前，先了解下 San Francisco Fonts 。

San Francisco Fonts 又叫旧金山字体，是一款西文字体。随着 iOS 9 更新面世，在 WatchOS 中随 Apple Watch 一起悄然发售，并且还将在 Apple TV 上的新 tvOS 中使用。

San Francisco Fonts 在 iOS 系统上用于替代升级另外一款西文字体 Helvetica Neue。Apple 做了一些重要的改变，使其成为平台上更好的，甚至是完美的西文字体。

-apple-system/BlinkMacSystemFont

话说回来。正如每个前端开发人员都知道的那样，将一个功能纳入规范是一回事，将其纳入浏览器又是另一回事。

幸运的是，system-ui 的普及很快。 Chrome 和 Safari 都可以在各种平台上完全支持它。只有 Mozilla 和 Windows 相对落后。

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

仔细看上图的最后两行：

Supported as the -apple-system value (only on macOS and iOS)
Supported as the BlinkMacSystemFont value (only on macOS)

考虑到不同平台及向后兼容，在 macOS 和 iOS 上，我们需要使用 -apple-system 及 BlinkMacSystemFont来兼容适配 system-ui 标准。

Segoe UI

Segoe UI 是 Windows 从 Vista 开始的默认西文字体族，只有西文，不支持汉字，属于无衬线体。

它也表示一个系列而不是某一款单一字体。使用 font-family: Segoe UI 可以在 Windows 平台及 Windows Phone 上选取最佳的西文字体展示。

Roboto

Roboto 是为 Android 操作系统设计的一个无衬线字体家族。Google 描述该字体为“现代的、但平易近人”和“有感情”的。

这个字体家族包含Thin、Light、Regular、Medium、Bold、Black六种粗细及相配的斜体。

总结一下

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

 
         { 
        
         font-family 
         :  
        
         system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto, 
        
         Helvetica 
         , 
         Arial 
         , 
        
         sans-serif 
         ,apple color emoji,segoe ui emoji,segoe ui symbol; 
        
         }

system-ui，使用各个支持平台上的默认系统字体
-apple-system，在一些稍低版本 Mac OS X 和 iOS 上，它针对旧版上的 Neue Helvetica 和 Lucida Grande 字体，升级使用更为合适的 San Francisco Fonts
BlinkMacSystemFont，针对一些 Mac OS X 上的 Chrome 浏览器，使用系统默认字体
segoe ui，在 Windows 及 Windows Phone 上选取系统默认字体
Roboto，面向 Android 和一些新版的的 Chrome OS
Helvetica,Arial，在针对不同操作系统不同平台设定采用默认系统字体后，针对一些低版本浏览器的降级方案
sans-serif，兜底方案，保证字体风格统一，至少也得是无衬线字体

上述 5 个字体族定义，优先级由高到底，可以看到，它们 5 个都并非某个特定字体，基本的核心思想都是选择对应平台上的默认系统字体。

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

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

并且系统字体的优点在于它与当前操作系统使用的相匹配，因此它的文本展示必然也是一个让人舒适展示效果。

当然，上述 font-family 的定义不一定是最佳的。譬如天猫在最前面添加了 "PingFang SC",miui,..必定也有他们的业务上的考虑。但是一些 fallback 方案向后兼容的思想都是一致的，值得参考学习。

最后

还有一些对字体细节深入讨论的，感兴趣的可以看看下面几篇文章：

好了，本文到此结束，希望对你有帮助 :)

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

If you have any questions or suggestions, you can interact more, original articles, writing is limited, ignorant, if the text is not correct place, Wan Wang told.

Finally, the opening of the new public number seeking attention, hope is in the form of shorter length, higher quality of some of the tips articles, including but not limited to CSS:

If you think your article useful, please feel free to a reward. Your support will encourage me to continue to create!

A reward support

(^_^) make a reward for a coffee (^_^)