关于前端必须知道的字体知识

1. 引入字体文件

在css中，font-family这个属性我们再熟悉不过了，font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。但是这个的前提是用户的系统安装了你需要的字体，如果你设置的字体用户的电脑上没有呢？这就需要把字体文件放到服务端，当浏览器访问页面时，页面同时加载该字体文件，这样你设置的 font-family 属性才能生效。
我们常用的字体图标就需要引入字体文件，如：

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1646304036030') format('truetype');
}

页面加载时，资源会同页面一起加载

2. ttf、otf 和 ttc

我们常见的字体文件的后缀名有 ttf、otf、ttc，那这些文件有什么区别呢？
ttf ：True Type Font 缩写，

是由美国Apple公司和Microsoft公司联合提出的一种新型数字化字形描述技术。TT是一种彩色数字函数描述字体轮廓外形的一套内容丰富的指令集合，这些指令中包括字型构造、颜色填充、数字描述函数、流程条件控制、栅格处理器（TT处理器）控制，附加提示信息控制等指令。TT采用几何学中的二次B样条曲线及直线来描述字体的外形轮廓，二次B样条曲线具有一阶连续性和正切连续性。抛物线可由二次B样条曲线来精确表示，更为复杂的字体外形可用B样长曲线的数学特性以数条相接的二次B样条曲线及直线来表示。描述TT字体的文件（内含TT字体描述信息、指令集、各种标记表格等）可能通用于MAC和PC平台。在Mac平台上，它以“Sfnt”资源的形式存放，在Windows平台上以TTF文件出现。为保证TT的跨平台兼容性，字体文件的数据格式采用Motorola式数据结构（高位在前，低位在后）存放。所有Intel 平台的TT解释器在执行之前，只要进行适当的预处理即可。Windows的TT解释器已包含在其GDI（图形设备接口）中，所以任何Windows支持的输出设备，都把TT解释器已包含在其GDI（图形设备接口）中，所以任何Windows支持的输出设备，都能用TT字体输出。

otf: Open Type Font 缩写,也叫 type2 字体，

是由Microsoft和Adobe公司开发的另外一种字体格式。它也是一种轮廓字体，比TrueType更为强大，最明显的一个好处就是可以在把PostScript字体嵌入到TrueType的软件中。并且还支持多个平台，支持很大的字符集，还有版权保护。可以说它是Type 1和ueType的超集。

ttc：True Type Collection 缩写，

TTC字体是TrueType字体集成文件(. TTC文件)，是在一单独文件结构中包含多种字体,以便更有效地共享轮廓数据,当多种字体共享同一笔画时,TTC技术可有效地减小字体文件的大小。TTC是几个TTF合成的字库，安装后字体列表中会看到两个以上的字体。两个字体中大部分字都一样时，可以将两种字体做成一个TTC文件，常见的TTC字体，因为共享笔划数据，所以大多这个集合中的字体区别只是字符宽度不一样，以便适应不同的版面排版要求。而TTF字体则只包含一种字型。

需要注意的是，otf 苹果机与PC机都能很好应用的兼容字体，而 ttf 是PC机应用较好，苹果机兼容性很差！06、07年开始OT全面普及，到现在，很多设计师已经不提供TT版本的作品了。

3. 字体的版权问题

这个往往是被我们前端工程师忽视的一个问题，可能是我们接触到开源的东西太多了，以为字体嘛，拿来用就行，殊不知，如果不注意版权问题，往往会带来不必要的麻烦。
比如说，我们常用的微软雅黑字体，商用是要缴费的。比如说宣传页图片，视频字幕和嵌入到app中使用，都是侵权的。但是如果是用css的font-family，这个是直接调用系统中的字体，如果系统中有这个字体，那这个字体版权的所有者已经给该系统授权了，那就是不侵权的。如果通过@font-face引入微软雅黑的字体文件，那就是侵权的，被发现了，版权方会告你的。