前言
我身边的程序员中，很多都是技术专家，但他们却常常被字体这样简单的事情所困扰。
这篇文章我们来聊聊关于字体的常识。这些常识所涉及的问题，可操作性很强。它们都是在实际业务中遇到的，需要开发同学、产品经理、设计师反复沟通。
字体真的只是“系统默认，不解释”吗？产品是否被欺骗？还是发展只是敷衍？两人之间的比赛谁能获胜呢？学会这篇文章，你就赢了。
字体分类
常见字体可以分为两类：衬线字体和无衬线字体。
1、衬线：字符笔画的首尾有额外的装饰，笔画的粗细也会不同。
常见的衬线包括：
• 宋体、楷体 • 宋体
2、无衬线体：笔画粗细基本一致，只剩下主体，造型简洁有力，起源很晚。适合标题、广告等，辨识度高。
常见的无衬线字体包括：
• 黑龙江 • Windows 平台默认中文字体：微软雅黑 • Windows 平台默认英文字体：Arial • Mac & iOS 平台默认中文字体：萍方 SC • Mac & iOS 平台默认英文字体 字体：San Francisco•Android 平台默认字体: Droid Sans
补充：
现在衬线字体已经很少使用了，你所熟悉的“宋体”基本上只能在纸质出版物中看到。无衬线字体更符合现代审美。
所以，这里温馨提示：制作PPT时不要使用宋朝。如果不知道使用什么字体，就使用系统默认字体：Win平台使用微软雅黑，Mac平台使用萍方字体。
如果你发现设计师在做海报设计或者绘画时使用的是宋体，那说明她一定是个业余爱好者。
字体系列
CSS中的字体族可以理解为某种类型的字体。常见的字体家族可以分为五类：
•serif：衬线字体。 •sans-serif：无衬线字体。 •monospace：等宽字体。每个字母占据相同的宽度。编写代码时，尽量使用等宽字体。 •草书：手写字体。比如徐静蕾的笔迹。 •幻想：幻想字体。比如一些艺术字。
这五种字体家族并不代表某种特定的字体，但是当你在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的值相当于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 的字体才会加粗，加粗效果相同。
大多数字体都不是免费的
您需要知道的是：您所知道的大多数字体都不是免费的。也就是说，如果想要使用第三方付费字体进行商业活动，必须先付费并获得授权，才可以正常使用。当您为公司创建网页时，这是一种商业行为。
有免费字体（如思源海蒂、阿里巴巴普惠等），但数量太少，通用性不够。我们在制作网页的时候基本上不能使用它们。
因此，很多企业都会专门购买一套商业字体库，甚至自己开发一套字体，以避免日后潜在的麻烦和纠纷。
让我给你一个常见的场景。很多时候，前端同学拿到的视觉稿都是psd稿。在PS软件中，当我们用光标选择字体时，本来是想看看它用的是什么字体，但是却出现了如下场景：
当你看到这个 FZLTZCHK 字体时不要惊慌。赶紧上网查了一下，发现它的中文名字叫方正兰亭字体系列。基本可以肯定这个字体也会收费。
这个时候前端同学应该立即告诉产品或者设计师，这个字体不能免费使用，小心诉讼。
大多数情况下，网页使用系统默认字体就足够了。如果你真的想使用特殊字体，你要么开发自己的字体，要么花足够的钱购买商业字体。比如我们京东公司独立开发了一套商业字体JDZH，仅供京东公司使用。
最后一段
虽然字体很小，但很容易理解细节。
2005年6月，苹果创始人史蒂夫·乔布斯在斯坦福大学毕业典礼上发表演讲。他是这么说的：
里德学院当时提供全国最好的艺术书法课程。这所大学的每一张海报、每一个抽屉标签上都写满了美丽的书法。辍学后，我决定学习如何写出漂亮的书法。
那时的我从来没有想过将所学的设计知识运用到实际中。但十年后，我将这些设计和想法融入到Mac电脑中，这也使这台Mac成为第一台拥有漂亮字体的电脑。
而当Windows系统向Mac学习时，大家都觉得所有的电脑都应该是这个样子。
当时我无法将这些内容联系起来，但十年后回想起来，一切突然变得清晰起来。
参考
[1]衬线、无衬线、等宽、草书和幻想：%EF%BC%8Csans-serif%EF%BC%8Cmonospace%EF%BC%8Ccursive%E5%92%8Cfantasy/
本网站每日更新互联网创业教程，一年会员只需98，全站资源免费下载点击查看会员权益
