背景:
一些前端UI库例如bootstrap会给根节点(例如<html>/<body>)设置类似这样(font-family: sans-serif;)的字体规范,以防止页面字体不统一。
用法说明:
font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。下面是一些知名网站的font-family设置:
GitHub:
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
CSDN:
font-family: PingFang SC,Hiragino Sans GB,Arial,YaHei,Verdana,Roboto,Noto,Helvetica Neue,sans-serif;
可以发现一个共同的特点是都有sans-serif,因为sans-serif代表无衬线字体(类似于微软雅黑的样式),它是一个大类而不是某一种字体,可以用来为页面字体兜底,当前面的字体在某些情况下不支持时,可保证页面字体至少是无衬线的样式,看起来没有明显的差别。
衬线字体与无衬线字体
就 Web 常用的一些字体而言,其实大体上分为衬线字体和无衬线字体。
衬线字体 -- 关键字为 serif,意为有衬线的字体,衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰,而且笔画的粗细会有所不同,这些细节在大写字母中特别明显。
中文下,无衬线字体就是黑体,黑体字也就是又称方体或等线体,没有衬线装饰,字形端庄,笔画横平竖直,笔迹全部一样粗细。
对于 CSS 中的 font-family
而言,它有两类取值:
- 一类是类似这样的具体的字体族名定义:
font-family: Arial
这里定义了一个具体的字体样式,字体族名为 Arial
; - 一类是通用字体族名,它表示一大类字体(并非单个),类似这样:
font-family: sans-serif。
通用字体族名还有:
serif
衬线字体族-
sans-serif
非衬线字体族 -
monospace
等宽字体,即字体中每个字宽度相同 -
cursive
草书字体 -
fantasy
主要是那些具有特殊艺术效果的字体
字体定义规则建议
1、尽量使用系统默认字体
使用系统默认字体的主要原因是性能,并且系统字体的优点在于它与当前操作系统使用的相匹配,因此它的文本展示必然也是一个让人舒适展示效果。
2、兼顾中西,西文在前,中文在后
中文或者西文(英文)都要考虑到。由于大部分中文字体也是带有英文部分的,但是英文部分又不怎么好看,但是英文字体中大多不包含中文。通常会先进行英文字体的声明,选择最优的英文字体,这样不会影响到中文字体的选择,中文字体声明则紧随其次。
3、兼顾多操作系统
选择字体的时候要考虑多操作系统。例如 MAC OS 下的很多中文字体在 Windows 都没有预装,为了保证 MAC 用户的体验,在定义中文字体的时候,先定义 MAC 用户的中文字体,再定义 Windows 用户的中文字体;
4、兼顾旧操作系统,以字体族系列 serif 和 sans-serif 结尾
当使用一些非常新的字体时,要考虑向下兼容,兼顾到一些极旧的操作系统,使用字体族系列 serif 和 sans-serif 结尾总归是不错的选择。