我周围的码农当中，有很多是技术大神，却常常被字体这种简单的东西所困扰。
字体真的只是“系统默认，无从解释”这么简单吗？是产品被忽悠？还是开发在敷衍？二者之间的博弈究竟谁能胜出？学会本文，你就能胜出。
常见的字体可以分为两类：衬线体、无衬线体。
1、serif（衬线体）：在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。
常见的衬线体有：
常见的无衬线体有：
补充：
衬线体如今已经很少使用了，你所熟悉的“宋体”，也基本只能在纸质出版物中见到。而非衬线体更符合现代审美。
所以，在这里温馨提示各位：做PPT不要用宋体。如果你不知道用什么字体，那就用系统的默认字体就好：Win平台用微软雅黑、Mac平台用苹方字体。
如果你发现一名设计师，在做海报设计、或者制图的时候，使用了宋体，说明她一定是个外行。
CSS中的字体族可以理解成是某一类字体。常见的字体族可以分为五类：
这五类字体族不代表某一个具体的字体，而是当你在CSS中指定字体族的时候，系统就有可能在字体族中找出一种字体来显示。
多字体fallback机制：当指定的字体找不到（或者某些文字不支持这个字体）时，那就接着往后找。比如：
.div1{font-family:"PingFangSC","MicrosoftYahei",monospace;}上方CSS代码的意思是：让指定标签元素中的文字，在Mac&iOS平台用苹方字体，在Win平台用微软雅黑字体，如果这两个字体都没有，就随便找一个等宽的字体进行渲染。
注意：
（1）写CSS代码时，字体族不需要带引号。
（2）有些Mac用户会安装Office等软件，安装这些软件后，系统会顺带安装微软雅黑字体。此时，写CSS代码时，如果写成"MicrosoftYahei","PingFangSC"这种顺序，可能导致有些Mac用户用微软雅黑来显示字体。这么好看的苹方字体，你忍心割舍吗？
想要明白这些疑惑，我们先来看看font-weight有哪些属性值。
font-weight属性：在设置字体是否加粗时，属性值既可以直接填写100至900这样的数字，也可以填写normal、bold这样的单词。normal的值相当于400，bold的值相当于700。如下：
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;//相当于400font-weight:bold;//相当于700关键问题来了。很多人会发现，在Windows平台的浏览器中，font-weight无论是设置300、400，还是500，文字的粗细都没有任何变化，只有到600的时候才会加粗一下，感觉浏览器好像不支持这些数值，那搞这么多档位不就是多余的吗？
这个时候，大家就开始吐槽Windows电脑太挫、Windows浏览器太挫；同时还会感叹Mac真香，支持字体的各种粗细。
实际上，所有这些数值关键字浏览器都是支持的，之所以没有看到任何粗细的变化，是因为你所使用的字体不支持。
就拿“微软雅黑”来举例，它只支持400和700这两种粗细，所以当你在代码里写成500的时候，也会被认为是400。但是Mac上的“苹方”字体，就支持从100到900之间的各种粗细。
一张图，胜过千言万语。解释了这么多，我们来看看各大平台的字体加粗效果是什么样的。
以下截图，都是我亲测的结果，如果你打算让别人看效果，直接把下面的图丢给他即可。像我这样贴心的前端，不多见了。
1、Mac平台的默认字体加粗效果：（苹方字体）
2、Windows平台的默认字体加粗效果：（微软雅黑字体）
3、iOS平台的默认字体加粗效果：（苹方字体）
4、Android平台（华为P30Pro）的默认字体加粗效果：（DroidSans字体）
总结：（各大平台的默认字体加粗效果）
「微软雅黑」是免费字体吗？并不是。你可以将微软雅黑字体用在office软件中，但是一旦脱离了office软件或者脱离了Windows系统（比如说，你把做好的PPT打印出来拿去做商业宣传），你就不能使用该字体。
同理，苹果专属的「苹方字体」也只能在苹果系统的生态内使用。
这也就是为什么，很多公司会专门购买一套商用字体库、甚至是自己开发一套字体出来，避免未来潜在的纠纷和麻烦。
给大家列举一个常见的场景。很多时候，前端同学拿到的视觉稿是psd稿，需要用PS软件打开源文件，才能看到里面的文字是什么字体。在PS软件里，当我们用光标选中字体的时候，出现了下面这种场景：
看到上面的FZLTZCHK，不要慌，马上去Google查一下，发现这个字体的全称是方正兰亭字体系列。恩，基本可以肯定，这个字体也是要收费的。
这个时候，前端同学要马上告诉产品或者设计师，不要用这个字体，因为它是商用字体，是要收费的，小心吃官司。那我们该用什么字体呢？接着往下看。
大多数情况下，网页使用系统默认的字体就足够了。如果要使用特殊字体，顶多只是让阿拉伯数字使用特殊字体。中文和英文，使用默认字体，完全足够。
如果确实要使用特殊字体，只有这几种办法：
比如我所在的JD公司就自主开发了一套商用字体JDZH（只允许JD公司自己用，别家公司不允许用），支持三种粗细。如下：
/***JD正黑体，提供三种字重，请严格按设计稿选择字体*/@font-face{font-family:'JDZH-Light';src:url('xxx.com/data/ppms/others/JDZH_Light.ttf')format('truetype');}@font-face{font-family:'JDZH-Regular';src:url('xxx.com/data/ppms/others/JDZH_Regular.ttf')format('truetype');}@font-face{font-family:'JDZH-Bold';src:url('xxx.com/data/ppms/others/JDZH_Bold.ttf')format('truetype');}@font-face{font-family:'JDZhengHT-EN-Bold';src:url('xxx.com/data/ppms/others/JDZhengHei_01_Bold.ttf')format('truetype');}为了使用这个JDZH字体，JD公司在实际开发网页时，是这样做的：
这个JDZH，我们一般也只使用在阿拉伯数字中；中文和英文，建议使用系统默认字体就行。
思源黑体（SourceHanSans）：Adobe和Google在2014年7月联合推出的针对中日韩的开源字体，在字重（字体粗细程度）上分7个层级。
上图中，点击红框部分，即可下载该字体的压缩包。
思源宋体：同样也是Adobe联合Google经过长达一年半的研发，在2019年4月3日发布了思源宋体（SourceHanSerif，Google称NotoSerifCJK）。
思源宋体包含了简繁日韩四种汉字写法，拥有7种粗细字重，共设计了458745个汉字。也就是说每一种字重包括65535个字形。
方正对外提供四款免费字体，楷体、黑体、仿宋、书宋，可以商业发布，只要不进行转换、改编、传播。
说到中文字体开源的鼻祖，学者房骞骞在2004年发起的公益项目应该算一个。文泉驿系列字体是开源字体，允许商业使用。
这是一款个人设计师郑庆科推出的黄油体。
FontSpace有很全的字体，都是用户自己上传的，截至2017年3月有21款免费可商用的字体（包含2款文泉驿中文）。
濑户制作的免费字体，字体包含中文繁体常用字及多国语言。
这是一款设计师都爱用的英文字体，简单实用。
密码:md0d
所谓「见微知著」，一个再不起眼的知识点，也是有很多学问的。光是“字体”这一点，就足够成为一门学科。
2005年，苹果公司创始人乔布斯（SteveJobs）在斯坦福大学的毕业典礼演讲上，有过这样一段话：
当时的我从来没有期盼过我所学的这些东西，能够在我的生活中有什么实际的用处。
但是到了十年之后，当我们在设计第一台Macintosh电脑时，这些所学都涌进了我的头脑。于是，我把这些设计融入到了Mac电脑之中，这也使这台Mac成为了第一台拥有漂亮字体的电脑。
可以说，如果我当时没有退学，就不会有机会去参加我感兴趣的美术字课程，Mac也就不会拥有那些美妙的排版和字体。而当Windows系统借鉴了Mac之后，似乎所有的电脑都应该是这个样子。
当时的我没有办法把这些点点滴滴连接起来，但是，当我十年后回顾的时候，一切都变得豁然开朗。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：