不凡说 / 文章详情

font-family 属性详解

2022-04-22 16:37 314

font-family属性详解

image

问题描述

当我们拿到设计稿去实现一个网页时,经常会发现设计稿当中一般使用的字体都是 PingFang SC 这一款字体。这是因为我们的 UI 设计师 一般使用的都是 Mac 电脑制作的设计稿。但是我们并不能傻乎乎的就按照设计稿直接设置 font-family:PingFang SC;

因为在 Windows 系统下并没有苹方字体可以使用。所以我们需要灵活地去设置网页的字体家族,在不同的系统下,不同的设备下,使用合适的字体,并且兼顾到中英文。并不是设计稿是什么字体,就必须设置为这款字体。

一般我们都会为 body 标签,指定 font-family 属性,为整个网页设置统一的字体,而且尽可能的使用各个系统下的默认字体。

各大网站最新的 font-family

  • 小米:Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
  • 京东:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
  • 天猫: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;

其中 system-ui-apple-systemBlinkMacSystemFontSegoe UIHelveticaArial 是在指定使用各个系统下默认的西文字体。

其中 "PingFang SC" ,Microsoft Yahei 指定各个系统下默认的中文字体。

其中 Hiragino Sans GB ,Heiti SC ,WenQuanYi Micro Hei 指定一些常见的中文字体。

font-family

对于 CSS 的 font-family 而言,设置时,它有两类取值。

  1. 一类是类似这样的具体的字体族名定义:font-family: Arial 这里定义了一个具体的字体样式,字体族名为 Arial;

关于字体族名,有很多种:

  • Helvetica
  • Arial
  • PingFang SC
  • Microsoft Yahei
  • Hiragino Sans GB
  • ...
  1. 一类是通用字体族名,它表示一大类字体(并非单个),类似这样:font-family: sans-serif

关于通用字体族名,有5种:

  • serif 衬线字体族
  • sans-serif 非衬线字体族
  • monospace 等宽字体,即字体中每个字宽度相同
  • cursive 草书字体
  • fantasy 主要是那些具有特殊艺术效果的字体

衬线体和无衬线字体

就 Web 常用的一些字体而言,其实大体上分为衬线字体无衬线字体

衬线字体 -- 关键字为 serif,意为有衬线的字体,衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰。

image

无衬线字体 -- 关键字为 sans-serif,也就是无衬线的意思。专指西文中没有衬线的字体,与汉字字体中的黑体相对应。与衬线字体相反,该类字体通常是没有衬线装饰,字形端庄,笔画横平竖直。

image

对比着来看:

image

image

中文字体界,两个有代表性的分类——宋体和黑体,分别对应着衬线字体和无衬线字体。

因为无衬线的字体结构简单,在同等字号下,无衬线的字体看上去要比有衬线的更大,结构也更清晰,所以电子设备的屏幕上也偏好使用无衬线字体。

image

新增通用字体族关键字

  • system-ui 系统默认字体
  • emoji 用于兼容 emoji 表情符号字符

system-ui

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

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

-apple-system/BlinkMacSystemFont

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

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

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

Segoe UI

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

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

Roboto

Roboto 是为 Android 操作系统设计的一个无衬线字体家族。

网站字体定义推荐写法

以 Git-Hub 网站的 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;
}
  1. system-ui,使用各个支持平台上的默认系统字体
  2. -apple-system, 在一些稍低版本 Mac OS X 和 iOS 上,升级使用更为合适的旧金山西文字体
  3. BlinkMacSystemFont,针对一些 Mac OS X 上的 Chrome 浏览器,使用系统默认字体
  4. segoe ui,在 Windows 及 Windows Phone 上选取系统默认字体
  5. Roboto,面向 Android 和一些新版的的 Chrome OS
  6. Helvetica,Arial,在针对不同操作系统不同平台设定采用默认系统字体后,针对一些低版本浏览器的降级方案
  7. sans-serif,兜底方案,保证字体风格统一,至少也得是无衬线字体

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

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

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

中文字体设置

当然国内网站还要考虑到中文字体,因为上述 Git-Hub 是一个外文网站,所以没有中文字体的需求。

  • "PingFang SC" 苹果默认的中文字体
  • Microsoft Yahei windows默认的中文字体
  • Heiti SC 黑体
  • WenQuanYi Micro Hei 黑体,类似的还有冬青黑体Hiragino Sans GB
  • "\5B8B\4F53" 宋体,也可以直接写成 宋体

字体设置建议

1、尽量使用系统默认字体
2、兼顾中西,西文在前,中文在后

中文或者西文(英文)都要考虑到。由于大部分中文字体也是带有英文部分的,但是英文部分又不怎么好看,但是英文字体中大多不包含中文。通常会先进行英文字体的声明,选择最优的英文字体,这样不会影响到中文字体的选择,中文字体声明则紧随其次。

3、兼顾多操作系统

选择字体的时候要考虑多操作系统。例如 MAC OS 下的很多中文字体在 Windows 都没有预装,为了保证 MAC 用户的体验,在定义中文字体的时候,先定义 MAC 用户的中文字体,再定义 Windows 用户的中文字体。

4、以字体族系列 serif 和 sans-serif 结尾