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

  • 知乎
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
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
  • CSS-Tricks
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. 一类是类似这样的具体的字体族名定义:

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 设置为例:

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

参考链接:
1. 如何优雅的选择字体 font-family
2. 中文环境下中文排版的font-family 字体选择
3. Web 字体 font-family 再探秘
4. 让你的设计更好看:10款常用的数字字体推荐
5. 界面好看,字体当然不能拖后腿
6. @font-face MDN

发表评论

电子邮件地址不会被公开。 必填项已用*标注