自定义 Web 字体

2021-09-14

目前 Web 常用的字体格式有：EOT、TTF、OTF、WOFF、WOFF2、SVG，但并没有一种格式可以在所有浏览器中运行。所以这就意味必须使用多种字体格式来提供一致的体验。

使用字体

通常网页使用的字体会受制于操作系统，如果我们在设计中使用了某个特殊字体而用户的操作系统没有安装，那么网页则会退而求其次的选择系统已有的字体。因此我们并不能随便使用一些好看的字体，只能选用一些安全字体。比如：Helvetica，Arial，宋体，微软雅黑等。

通过 CSS 的 @font-face 规则，可以允许 Web 设计人员使用用户计算机上未安装的字体。找到/购买了想要使用的字体后，只需将字体文件包含在 Web 服务器上，它将在需要时自动下载给用户。

@font-face {
  font-family: 'family-name';
  src: url('/path/FontFamily.eot');
  src: url('/path/FontFamily.eot?#iefix') format('embedded-opentype'),
    url('/path/FontFamily.woff') format('woff'),
    url('/path/FontFamily.ttf') format('truetype'),
    url('/path/FontFamily.svg#iconfont') format('svg');
  font-weight: normal;
  font-style: normal;
}

#iefix 有何作用？
IE9 之前的版本没有按照标准解析字体声明，当 src 属性包含多个 url 时，它无法正确的解析而返回 404 错误，而其他浏览器会自动采用自己适用的 url 。因此把仅 IE9 之前支持的 EOT 格式放在第一位，然后在 url 后加上 ? ，这样 IE9 之前的版本会把问号之后的内容当作 url 的参数。至于 #iefix 的作用，一是起到了注释的作用，二是可以将 url 参数变为锚点，减少发送给服务器的字符。
为何有两个 src ？
绝大多数情况下，第一个 src 是可以去掉的，除非需要支持 IE9 下的兼容模式。在 IE9 中可以使用 IE7 和 IE8 的模式渲染页面，微软修改了在兼容模式下的 CSS 解析器，导致使用 ? 的方案失效。由于 CSS 解释器是从下往上解析的，所以在上面添加一个不带问号的 src 属性便可以解决此问题。

如果提供了 local() 函数，则会从用户本地查找指定的字体名称，并且找到了一个匹配项，那么本地字体就会被使用，否则，字体就会使用 url() 函数下载的资源。

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
    local("HelveticaNeue-Bold"),
    url('/path/FontFamilyBold.woff';
    font-weight: Bold;
}

如上实例用到了用户本地字体 “Helvetica Neue Bold” 的备份；如果当前用户（浏览器）未安装该字体（两种可能的字体名都已经试过），就会用下载的字体”FontFamilyBold.woff”来代替。

字体格式

TTF（TrueType 字体）
TrueType 是 1980 年代后期由 Apple 和 Microsoft 开发的字体标准。 TrueType 是 Mac OS 和 Microsoft Windows 操作系统最常用的字体格式。

OTF（OpenType 字体）
OpenType 是可缩放计算机字体的格式。它基于 TrueType 构建，并且是 Microsoft 的注册商标。今天，OpenType 字体在主要计算机平台上得到普遍使用。

EOT（嵌入式 OpenType 字体）
EOT 字体是 Microsoft 设计的 OpenType 字体的紧凑形式，用作网页上的嵌入式字体。

WOFF（Web 开放字体格式）
WOFF 是用于网页的字体格式。它于 2009 年开发，现已成为 W3C 的推荐标准。 WOFF 本质上是具有压缩和其他元数据的 OpenType 或 TrueType。目标是支持在有带宽限制的网络上从服务器到客户端进行字体分发。

WOFF2是下一代WOFF。WOFF2格式提供了比原始WOFF平均30%的压缩增益。因为它还只是推荐升级，没有得到WOFF的广泛支持。

WOFF（Web 开放字体格式）
SVG 字体允许在显示文本时将 SVG 用作字形。 SVG 1.1 规范定义了一个字体模块，该模块允许在 SVG 文档中创建字体。您还可以将 CSS 应用于 SVG 文档，同时 @font-face 规则可以应用于 SVG 文档中的文本。

浏览器支持

	EOT	OTF/TTF	WOFF	WOFF2	SVG
IE 8-11	✓
IE 9-11	✓	✓	✓
Edge 12-14		✓	✓
Firefox 40-45		✓	✓	✓
Chrome 43-49		✓	✓	✓
Safari 8-9		✓	✓		✓
Oprea 32-35		✓	✓	✓
iOS Safari 8.4-9.1		✓	✓		✓
Android 4.4-44		✓	✓
Chrome for Android 46		✓	✓	✓

明智选择

对于引入字体对于英文来说，是合适的，因为字体文件本身不大。但是对于中文字体，一个字体文件就好几 MB ，既耗费流量，又拖慢了加载速度，还会出现加载后字体突然变化的情况，尤其是对于移动端来讲，非常不合适。

所以需要用到 font-spider 对字体文件压缩，可以智能删除没有被使用的字形数据，大幅度减少字体体积，并且支持 woff2、woff、eot、svg 字体格式生成。

Fontmin 第一个纯 JavaScript 字体子集化方案。

CloudConvert 是一个在线文件转换器，支持几乎所有的音频、视频、文档、电子书、档案、图像、电子表格和演示格式。

使用字体

字体格式

浏览器支持

明智选择

参考