css字体选择

字体分类

常见的字体可以分为两类：衬线体、无衬线体。

1、serif（衬线体）：在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。

常见的衬线体有：

宋体、楷体
Times New Roman

2、sans-serif（无衬线体）：笔划粗细基本一致，只剩下主干，造型简明有力，起源也很晚。适用于标题、广告等，识别性高。

常见的无衬线体有：

黑体
Windows 平台默认的中文字体：微软雅黑（Microsoft Yahei）
Windows 平台默认的英文字体：Arial
Mac & iOS 平台默认的中文字体：苹方（PingFang SC）
Mac & iOS 平台默认的英文字体：San Francisco
Android 平台默认字体：Droid Sans

补充：

衬线体如今已经很少使用了，你所熟悉的“宋体”，也基本只能在纸质出版物中见到。而非衬线体更符合现代审美。

字体族

CSS 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类：

serif：衬线体。
sans-serif：无衬线体。
monospace：等宽字体。每一个字母所占的宽度是相同的。写代码的字体尽量用等宽字体。
cursive：手写字体。比如徐静蕾手写体。
fantasy：梦幻字体。比如一些艺术字。

这五类字体族不代表某一个具体的字体，而是当你在 CSS 中指定字体族的时候，系统就有可能在字体族中找出一种字体来显示。

参考链接：serif，sans-serif，monospace，cursive和fantasy

多字体 fallback 机制

多字体 fallback 机制：当指定的字体找不到（或者某些文字不支持这个字体）时，那就接着往后找。比如：

css

.div1{
    font-family: "PingFang SC", "Microsoft Yahei", monospace;
}

上方 CSS 代码的意思是：让指定标签元素中的文字，在 Mac & iOS 平台用苹方字体，在 Win 平台用微软雅黑字体，如果这两个字体都没有，就随便找一个等宽的字体进行渲染。

注意：

（1）写 CSS 代码时，字体族不需要带引号。

（2）有些 Mac 用户会安装 Office 等软件，安装这些软件后，系统会顺带安装微软雅黑字体。此时，写 CSS 代码时，如果写成 "Microsoft Yahei", "PingFang SC"这种顺序，可能导致有些 Mac 用户用微软雅黑来显示字体。

font-weight：字体的加粗属性

font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你把做好的网页拿给产品经理验收时，网页一打开，产品经理首先关注到的就是字体的加粗问题，你信不信？下面这些话都是产品经理的口头禅，想必早已让你产生了幻听：

“这个字体怎么没有加粗？”
“这个字体是不是太粗了点？”
“为什么 iPhone 和 Android 手机上的文字粗细不一致？”

想要明白这些疑惑，我们先来看看 font-weight 有哪些属性值。

font-weight 属性：在设置字体是否加粗时，属性值既可以直接填写 100 至 900 这样的数字，也可以填写normal、bold这样的单词。normal的值相当于 400，bold的值相当于 700。如下：

css

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

font-weight: normal; // 相当于 400
font-weight: bold;   // 相当于 700

关键问题来了。很多人会发现，在 Windows 平台的浏览器中， font-weight 无论是设置300、400，还是500，文字的粗细都没有任何变化，只有到600的时候才会加粗一下。

实际上，所有这些数值关键字浏览器都是支持的，之所以没有看到任何粗细的变化，是因为你所使用的字体不支持。

就拿“微软雅黑”来举例，它只支持 400 和 700 这两种粗细，所以当你在代码里写成500的时候，也会被认为是400。但是 Mac 上的“苹方”字体，就支持从100到900之间的各种粗细。

补充：“苹方”字体的粗细效果，大图预览

“苹方”字体包含了六种自重：常规体、中等、细体、特粗体、特细体、粗体。对应的CSS样式如下：

css

/* 苹方-简 极细体：100 */
font-family: PingFangSC-Ultralight;

/* 苹方-简 纤细体：200*/
font-family: PingFangSC-Thin;

/* 苹方-简 细体：300 */
font-family: PingFangSC-Light;

/* 苹方-简 常规体：400 */
font-family: PingFangSC-Regular;

/* 苹方-简 中黑体：500 */
font-family: PingFangSC-Medium;

/* 苹方-简 中粗体：600、700、800、900 */
font-family: PingFangSC-Semibold;

大图预览如下：

引用外部字体

css

@font-face {
    font-family: 'xxxxx-Light';
    src: url('xxx.com/xxxxx.ttf') format('truetype');
}

字体选择推荐

css

font-family: -apple-system, SF UI Text, PingFang SC, Microsoft YaHei, Arial, sans-serif

-apple-system：苹果系统自带的字体，确保在苹果设备（如iPhone、iPad、Mac）上显示效果最佳。
SF UI Text：苹果为iOS和macOS设计的系统字体，用于提升文本的可读性和美观度。
Arial：一款经典的无衬线字体，具有较高的兼容性和可读性，在大多数非苹果设备上都能良好显示。
PingFang SC：苹果为中文环境设计的字体，具有简洁、现代的风格，适用于苹果设备上的中文显示。
Microsoft YaHei：微软推出的一款字体，显示效果较好，常用于Windows系统的网页设计中，适用于Windows平台。
sans-serif：备用字体族，当上述字体都不可用时，浏览器会使用系统默认的无衬线字体。

css字体选择 ​

字体分类 ​

字体族 ​

多字体 fallback 机制 ​

font-weight：字体的加粗属性 ​

补充：“苹方”字体的粗细效果，大图预览 ​

引用外部字体 ​

字体选择推荐 ​