Web 内嵌字体格式

简而言之，WOFF2 是你唯一需要的字体格式。如果你需要支持 IE11，那么就加上 WOFF 作为备用字体格式。

@font-face {
  font-family: 'Source Code Pro';
  font-weight: 400;
  font-style: normal;
  src: local('Source Code Pro'),
    url('source-code-pro-regular.woff2') format('woff2');
}

WOFF 是专门为 Web 优化的压缩字体格式，能够提升加载速度。WOFF2 是第二代标准，压缩率更高，加载更快。

历史上，TTF，OTF，EOT，SVG 等格式的字体都曾经出现在网页上。那是因为早期的浏览器所支持的字体格式不同。这些字体格式压缩都做得不太好，加载速度慢。在今天，已经没有任何理由使用它们了。如果你的项目中还有这些字体，请删除它们。

对于常见字体，可以用 local() 函数尝试加载系统字体，以减少网络流量。

中文字体包含数万字符，因此体积通常十分巨大，但是单个网页通常只用到几百或几千个汉字。最新的 Web 标准允许按照 Unicode 区块拆分字体。比如 Google Fonts 的 Noto Sans SC 字体就是这样实现的：

/* [4] */
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans SC Regular'),
    local('NotoSansSC-Regular'),
    url(https://fonts.gstatic.com/s/notosanssc/v10/k3kXo84MPvpLmixcA63oeALhLIiP-Q-87KaAaH7rzeAODp22mF0qmF4CSjmPC6A0Rg5g1igg1w.4.woff2) format('woff2');
  unicode-range: U+1f1e9-1f1f5, U+1f1f7-1f1ff, U+1f21a, U+1f232, U+1f234-1f237, U+1f250-1f251, U+1f300, U+1f302-1f308, U+1f30a-1f311, U+1f315, U+1f319-1f320, U+1f324, U+1f327, U+1f32a, U+1f32c-1f32d, U+1f330-1f357, U+1f359-1f37e;
}

注：以上只是其中一个小区块，完整代码见此。