Webfont

一个webfont精简服务

由于中文汉字数量巨大，导致一个字体文件动辄好几M。一个页面为了渲染几个字而加载这么大的文件实属不划算

一个想法是创建一个在线服务，将需要渲染的文字发送给该服务，它就能将原始字体文件进行裁剪，使其只包含要被渲染的文字即可，这样一个字体包也就几k了

基于这种想法我开发了一个web服务，详情及源码：https://github.com/HuntZou/webfont

效果如图：

浏览器使用webfont加载自定义字体

有时候为了美观想要在网页中使用一些特殊的字体

font-family

可以使用css中的font-family属性

它支持cursive、fangsong、sans-serif、serif等属性值。有三点需要注意：

1. 只有在本机中安装了某个字体，font-family属性设置的值才会生效。例如：设置font-family: “华文仿宋”，若本机没有安装该字体，则该字体设置无效，回退到默认字体显示

2. 上述的 cursive、fangsong、sans-serif、serif 等并不是某个字体名称，而是一类字体名称。例如 cursive 表示草书，若你电脑中安装了归类为草书的字体，则使用该字体，否则回退到默认字体。

3. 正是因为以上两个特性，font-family支持同时指定多个字体。例如京东网站的设置：

可以看到它同时指定了特定字体、字体类别。当前一个字体设备不支持时，自动检测下一个字体。其最后设置的是 sans-serif，这是一种无衬线字体类别，一般设备都有该类字体，也算是最后的fallback。

webfont & font-face

有时候我就想用某种字体，而它又不是所有设备都安装的怎么办？那就可以考虑使用webfont，一种让网页自备字体的技术。

font-face可以让网页主动加载某种字体

font-face API: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face

<css>
@font-face {
  font-family: "some font";
  /*为了兼容性，可以同时加载多种格式的字体*/
  src: url("https://www.somewhere.com/some-webfont.woff2") format("woff2"),
       url("/somewhere/some-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: auto;
}

.my-class {
  font-family: "some font", serif;
}
</css>

但这样有两个非常大的问题：

1. 字体文件较大，网络加载缓慢

webfont在欧美发展比较成熟，原因是拉丁字母就那几个，所以一个字体文件也就几kb，几乎不影响网页加载。但汉字有好几万个，这导致一个中文的字体文件普遍在3-10Mb左右，加载很慢

2. font-face有个font-display属性，该属性默认值为auto，一些情况下，这会导致字体先不显示，过一会再以默认字体显示，再过一会才会以设置的字体显示，视觉体验及其割裂。

设置为auto或block时，其渲染过程为：阻塞文字渲染（导致显示空白），等待字体下载完成。在chrome中，若3秒后还没下载完成，则先使用默认字体渲染，字体下载完成后再使用指定字体重新渲染（其他浏览器可能会有不同）

当然，也可以设置成swap，就没有阻塞过程，直接使用默认字体渲染，但也会出现割裂。

font-display API：https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

能不能快一点

有两种办法（本质是一样的）：

1. 在字体文件中只抽取页面中使用过的汉字

有个叫 font-spider 的工具，它可以根据网页内容大大精简字体文件，我没用过。