字体分类
常见的字体可以分为两类：衬线体、无衬线体。
1、serif（衬线体）：在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。
常见的衬线体有：
•宋体、楷体
•Times New Roman
2、sans-serif（无衬线体）：笔划粗细基本一致，只剩下主干，造型简明有力，起源也很晚。适用于标题、广告等，识别性高。
常见的无衬线体有：
•黑体
•Windows 平台默认的中文字体：微软雅黑（Microsoft Yahei）
•Windows 平台默认的英文字体：Arial
•Mac & iOS 平台默认的中文字体：苹方（PingFang SC）
•Mac & iOS 平台默认的英文字体：San Francisco
•Android 平台默认字体：Droid Sans
补充：
衬线体如今已经很少使用了，你所熟悉的“宋体”，也基本只能在纸质出版物中见到。而非衬线体更符合现代审美。
所以，在这里温馨提示各位：做PPT不要用宋体。如果你不知道用什么字体，那就用系统的默认字体就好：Win 平台用微软雅黑、Mac 平台用苹方字体。
字体族
CSS 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类：
•serif：衬线体。
•sans-serif：无衬线体。
•monospace：等宽字体。每一个字母所占的宽度是相同的。写代码的字体尽量用等宽字体。
•cursive：手写字体。比如徐静蕾手写体。
•fantasy：梦幻字体。比如一些艺术字。
这五类字体族不代表某一个具体的字体，而是当你在 CSS 中指定字体族的时候，系统就有可能在字体族中找出一种字体来显示。
多字体fallback
多字体 fallback 机制，可以理解成是字体的一种兜底机制。它意思是：当指定的字体找不到时，就继续往后找。比如：
.div{
font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
}
上面这行CSS代码的意思是：让文字在 iOS & Mac 操作系统上使用苹果的“苹方”字体，在 Windows 系统上用微软雅黑字体，如果这两个字体都没有，就随便找一个无衬线体进行显示。
font-weight：字体的加粗属性
font-weight 字体加粗属性，是让前端和产品同学最迷茫的属性。当你把做好的页面拿给产品经理体验时，产品经理首先关注到的就是字体的加粗问题。
我们先来看看 font-weight 有哪些属性值。
在设置字体是否加粗时，属性值既可以直接填写 100 至 900 这样的数字，也可以填写normal、bold这样的单词。normal的值相当于 400，bold的值相当于 700。如下：
关键问题是，很多人会发现，在 Android 平台的浏览器中， font-weight 无论是设置300、400，还是500，文字的粗细都没有任何变化，只有到700的时候才会加粗一下，感觉浏览器好像不支持这些数值，那搞这么多档位有用吗？
实际上，所有这些数值关键字浏览器都是支持的，之所以没有看到任何粗细的变化，要看你所使用的字体是否支持。
就拿“微软雅黑”这个字体来举例，它只支持两种粗细，所以当你在代码里写成500的时候，也会被认为是400。但是 Mac 上的“苹方”字体，就支持至少六种粗细。
各大平台的字体加粗效果
一张图，胜过千言万语。解释了这么多，我们来看看各大操作系统的默认字体，加粗效果是什么样的。
以下截图，都是我亲自测试的结果，如果你打算让别人看字体加粗效果，直接把下面的图丢给他即可。像我这样贴心的前端，恐怕不多见了。
1、iOS 平台的默认字体加粗效果：（苹方字体）
2、Android 平台（华为 P30 Pro）的默认字体加粗效果：（Droid Sans 字体）
3、Mac 平台的默认字体加粗效果：（苹方字体）
4、Windows 平台的默认字体加粗效果：（微软雅黑字体）
总结：（各大操作系统的默认字体加粗效果）
•Android 平台的 Droid Sans 字体，只有 >=700才会加粗；而且加粗效果相同。
•Mac & iOS 平台的“苹方”字体：500 和600，加粗效果是不同的；>=600的加粗效果是相同的。
•Windows 平台的“微软雅黑”字体：只有 >=600 才会加粗，而且加粗效果相同。
出自jd-wecTeam