Skip to main content

基础概念

常见的字体类型​

字体格式有太多选择，不幸的是始终没有一个能在所有的浏览器上通用。这意味着，你必须使用多种字体的方案来保持用户跨平台的一致性体验。本文内容如题，会依次介绍一下 TTF、OTF、WOFF、EOT 和 SVG 几种字体目前在 Web 上的情况。

字体名称字体后缀发行日期说明场景
Embedded Open Type.eot
TrueType.ttf传统字体，起源于
OpenType.otf用来替代TrueType的下一代字体
Web Open Font Format.woff2009专门为web设计的格式，很多字体均有woff格式
WOFF2.woff22013年7月能用就用，体积最小的字体
Scalable Vector Graphics Fonts.svg、.svgz支持复杂精准的动画控制

TrueType​

后缀：ttf

　　Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

EOT​

全称： Embedded Open Type

后缀：eot

　　嵌入字体格式（EOT）是微软开发的一种技术，允许 OpenType 字体嵌入到网页并可以下载至浏览器渲染，浏览器根据 CSS 中 @font-face 的定义，下载，渲染这种 .EOT 后缀的字体文件。这些文件只在当前页活动的状态下，临时安装在用户的系统中。

OpenType​

后缀：otf

　　OpenType是一种可缩放字型（scalable font）电脑字体类型，采用PostScript格式，是美国微软公司与Adobe公司联合开发，用来替代TrueType字型的新字型。这类字体的文件扩展名为.otf，类型代码是OTTO，现行标准为OpenType 1.4。

​ OpenType最初发表于1996年，并在2000年之后出现大量字体。它源于微软公司的TrueType Open字型，TrueType Open字型又源于TrueType字型。OpenType font包括了Adobe CID-Keyed font技术。Adobe公司已经在2002年末将其字体库全部改用OpenType格式。

OTF 的主要优点有：

  1. 增强的跨平台功能；
  2. 更好的支持Unicode标准定义的国际字符集；
  3. 支持高级印刷控制能力；
  4. 生成的文件尺寸更小；
  5. 支持在字符集中加入数字签名，保证文件的集成功能。

同一个 OpenType 字体文件可以用于 Mac OS，Windows 和 Linux 系统，这种跨平台的字库非常方便于用户的使用，用户再也不必为不同的系统配制字库而烦恼了。

OTF 的兼容性和 TTF 相同。

WOFF​

全称：Web Open Font Format

后缀名：woff、woff2

　　相对于 TrueType 和 OpenType ，WOFF（Web开发字体格式）是一种专门为了 Web 而设计的字体格式标准，它并不复杂，实际上只是对于 TrueType / OpenType 等字体格式的封装，并针对网络使用加以优化：每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输，并且不包含任何加密或者 DRM 措施。包括 Adobe、 Lino Type、Monotype 在内的几乎所有主要的字体供应商都加入到支持 WOFF 的行列中来。

​ WOFF 本质上是包含了基于 sfnt 的字体（如 TrueType、OpenType 或开放字体格式），且这些字体均经过 WOFF 的编码工具压缩，以便嵌入网页中。这个字体格式使用zlib压缩，文件大小一般比 TTF 小 40%。

WOFF2​

​ 是 WOFF 的下一代。 WOFF2 格式在原有的基础上提升了 30% 的压缩率。由于它还没有 WOFF 的广泛支持，所以还只是一个可展望的升级。WOFF 2 标准在 WOFF1 的基础上，进一步优化了体积压缩，带宽需求更少，同时可以在移动设备上快速解压。与 WOFF 1.0 中使用的 Flate 压缩相比，WOFF 2.0 是使用 Brotli 方法进行的压缩，压缩率更高，所以文件体积更小。

新的WOFF 2.0 Web 字体压缩格式平均要比WOFF 1.0小30%以上（某些情况可以达到50%+）

SVG​

全称：Scalable Vector Graphics

后缀：svg

　　顾名思义，就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体.svgz。SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG可以使你设计的网页可以更加精彩细致，使用简单的文本命令，SVG可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。

相关的CSS属性​

属性说明
font-family用来指定使用哪个字体，可以指定多个用来替补
@font-face用来声明一个外部引入的字体，自定义字体

只需将字体包安装在服务器上，当用户加载网页时，字体包会自动下载到用户机器上，保证字体能够正确渲染。

@font-family的子属性

属性说明示例
font-family
font-style
font-weight
src采用url指定字体链接，通过逗号分隔，可以支持多个字体引入用来兼容不同的浏览器url("字体链接") format("字体格式")
unicode-range

代码示例：

@font-face {
  font-family: 'Quicksand'; /* 字体的名称 */
  font-style: normal;    
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v30/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58m-wi40.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* 使用自定义的字体 */
.class {
    font-family: 'Quicksand';
}

字体类型转换​

TTF转WOFF2​

Github项目：https://github.com/nfroidure/ttf2woff2

var fs = require('fs');
var ttf2woff2 = require('ttf2woff2');

var input = fs.readFileSync('font.ttf');

fs.writeFileSync('font.woff2', ttf2woff2(input));

相关知识​

  • WOFF字体没有必要再开启GZIP，因为这个字体文本本身就是压缩过的。

  • WOFF 2.0的mime type值，怎么说呢，有些许小争议。Google使用font/woff2，而W3C则推荐application/font-woff2。我个人的建议是这样的：在CSS base64字体表示时候使用Google的font/woff2，毕竟是web呈现；然后服务器配置走application/font-woff2。

    # nginx
    types {
        application/font-woff2  woff2;
    }

    # apche
    AddType  application/font-woff2  .woff2