前言
我身边的码农中，很多都是技术专家，但常常被字体等简单的东西搞糊涂。
这篇文章我们来聊聊关于字体的常识。 这些常识涉及的问题可操作性很强，都是在实际业务中遇到的，都需要开发朋友、产品总监、设计师反复沟通。
字体真的像“系统默认，没办法解释”那么简单吗？ 产品是否具有误导性？ 还是发展敷衍了事？ 两人之间的比赛谁会获胜呢？ 学会这篇文章，你依然能赢。
字体分类
常见字体可以分为两类：衬线字体和无衬线字体。
1.serif（衬线字体）：在字符笔画的开头和结尾处有额外的装饰，并且笔画的粗细会有所不同。
常见的衬线有：
泰晤士新罗马字体、泰晤士新罗马字体
2、无衬线（sans-serif）：笔画粗细基本一致，只留下主体。 造型简洁有力，其起源很晚。 适合用于标题、广告等，识别度高。
常见的无衬线字体有：
黑体 Windows 平台默认英文字体：Microsoft Yahei Windows 平台默认中文字体：Arial Mac & iOS 平台默认英文字体：PingFang SC Mac&iOS 平台默认中文字体：San Francisco Android 平台默认字体：Droid Sans
补充：
现在衬线已经很少使用了，你熟悉的“宋体”基本上只能在纸质出版物中看到。 无衬线体更符合现代审美。
因此，这里温馨提醒大家：PPT中不要使用粗体。 如果不知道使用哪些字体，就使用系统默认字体：Win平台使用微软雅黑，Mac平台使用萍芳字体。
如果你发现一个设计师在做海报设计或绘图时使用粗体字体，那说明她一定是门外汉。
字体系列
CSS中的字体族可以理解为某种类型的字体。 常见的字体家族可以分为五类：
衬线体：衬线体。 sans-serif：无衬线字体。 等宽字体：等宽字体。 每个字母占据相同的长度。 编写代码时尽可能使用等宽字体。 草书：手写字体。 比如徐静蕾的笔迹。 幻想：幻想字体。 比如一些艺术字。
这五种字体家族并不代表某种特定的字体，但是当你在CSS中指定字体家族时css 苹方字体，系统可能会在该字体家族中找到一种字体来显示。
参考链接：衬线体、无衬线体、等宽字体、草书和幻想字体[1]
多种字体后备
多字体回退机制可以理解为一种字体自下而上的机制。 意思是：当找不到指定字体时，继续寻找。 例如：
.div{font-family: "PingFang SC", "Microsoft Yahei", sans-serif;}
上面这行CSS代码的含义是：让文本在iOS&Mac操作系统上使用Apple的“萍方”字体，在Windows系统上使用微软雅黑字体。 如果这两种字体都没有，就找一种不显示衬线字体的。
font-weight：字体的粗体属性
font-weight字体粗体属性是后端和产品朋友最苦恼的属性。 当你把完成的页面拿给产品总监体验时，产品总监首先关注的就是字体的加粗。
我们先来看看font-weight有哪些属性值。
设置字体是否加粗时，属性值可以直接填写100到900等数字，也可以填写普通、粗体等短语。 Normal的值相当于400css 苹方字体，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才会加粗，加粗的效果是一样的。
大多数字体都不是免费的
您需要知道的是：您所知道的大多数字体都不是免费的。 也就是说，如果想要使用第三方付费字体从事商业活动，必须先付费获得授权，才可以正常使用。 当你为公司制作网站时，这是一种商业行为。
有免费字体（如思源黑体、阿里巴巴普惠等），但数量太少，而且通用性不够，所以我们在制作网页时基本不使用它们。
因此，很多企业都会订购一套商业字体库，甚至自己开发一套字体，以避免日后潜在的麻烦和纠纷。
为您列出一个常见的场景。 很多时候，前端朋友收到的视觉稿都是psd稿。 在PS软件中，当我们使用光标选择字体时，本来是想看看它使用的是哪些字体，但是却出现了下面的场景：
当你看到这款FZLTZCHK字体时，不要惊慌，立即上网查一下，发现它的中文名称是方正兰亭字体系列。 基本可以肯定这个字体也是收费的。
这个时候前端朋友应该立即告诉产品或者设计师这个字体不能免费使用，谨防诉讼。
大多数情况下，使用系统默认的网页字体就足够了。 如果你真的想使用特殊字体，你要么开发自己的字体，要么花足够的钱购买商业字体。 比如我们京东公司独立开发了一套商业字体JDZH，仅供京东公司使用。
最后一段
字体虽小，但也能看出小处。
2005年6月，苹果创始人乔布斯在斯坦福大学毕业典礼上发表演讲。 他说了这样的话：
里德学院当时提供全国最好的书法课程。 这个学院的每张海报，每个抽屉上的每个标签都写满了优美的书法。 辍学后，我决定学习如何写出漂亮的书法。
那时的我从来没有想过我所学的设计知识有什么实际好处。 但六年后，我将这样的设计和创意融入到了一台Mac电脑中，这也让这台Mac成为了第一款字体漂亮的笔记本。
而当Windows系统借鉴了Mac的时候，大家都认为所有的笔记本都应该是这个样子。
当时我无法连接这种内容，但十年后回想起来，一切似乎都豁然开朗了。
参考
[1] 衬线、无衬线、等宽、草书和幻想：%EF%BC%8Csans-serif%EF%BC%8Cmonospace%EF%BC%8Ccursive%E5%92%8Cfantasy/
