font-family学习笔记（二）

目前各个网站使用的font-family

知乎

1	font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;

Github

1	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;

CSS-Tricks

1	font-family: Sentinel SSm A,Sentinel SSm B,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol

font-family 关键字

对于CSS中的font-family而言,它有两类取值. 1. 一类是类似这样的具体的字体族名定义:

1	font-family:"Arial" /* 这里定义了一个具体的字体样式,字体族名为Arial */

一类是通用字体族名,它是一种备选机制,用于在指定的字体不可用时给出较好的字体,类似这样:

1	font-family:sans-serif /* sans-serif表示无衬线字体族,例如 "Open Sans","Arial","微软雅黑" */

关于通用字体族名,在CSS Fonts Module Level 3 – Basic Font Properties 中,定义了5个,也就是我们熟知的几个通用字体族名： 1. serif衬线字体族 2. sans-serif非衬线字体族 3. monospace 等宽字体,即字体中每个字宽度相等 4. cursive 草书字体 5. fantasy 主要是那些具有特殊艺术效果的字体

新增通用字体族关键字

在 CSS Fonts Module Level 4 – Generic font families 中,新增了几个关键字：

system-ui 系统默认字体
emoji 用于兼容emoji表情符号字符
math 适用于数字表达式
fangsong 此字体系列用于中文的（仿宋）字体

system-ui

简单而言,font-family：system-ui 的目的就是在不同的操作系统的Web页面下,自动选择本操作系统下的默认系统字体. 默认适用特定操作系统的系统字体可以提高性能,因为浏览器或者 webview 不必去下载任何字体,而是使用已有的字体文件.font-family：system-ui 字体设置的优势之处在于它与当前操作系统使用的字体相匹配,对于文本内容而言,它可以得到最恰当的展示.

--apple-system/BlinkMacSystemFont

在 macOS 和 ios 上,我们需要使用 -apple-system 及 BlinkMacSystemFont 来兼容适配 system-ui 标准.

Segoe UI

Segoe UI 是 Windows 从 Vista 开始的默认西文字体族,只有西文,不支持汉字,属于无衬线字体. 它也表示一个系列而不是某一款单一字体.使用 font-family：segoe UI 可以在Windows 平台及Windows Phone 上选取最佳的西文字体展示.

Roboto

Roboto 是为 Android 操作系统设计的一个无衬线字体家族.这个字体家族包含Thin,Light,Regular,Medium,Bold,Black六种粗细及相配的斜体.

@font-face

@font-face 允许网页开发者为其网页指定在线或本地字体. 通过这种作者自备字体的方式,@font-face 可以消除对用户电脑字体的依赖.

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

font.css

github 上的一个项目,可以保证在不同平台上都显示为质量最高的黑体.可以参考下它的写法： https://zenozeng.github.io/fonts.css/

总结

以 Github 的 font-family 设置为例:

1	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;

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

参考链接：