



## 介绍
网页中如果使用了用户本地所没有的字体，需要通过 webfont 的方式提供在线字体。webfont 目前支持 woff 和 woff2 格式。

如果直接通过 ttf 格式转换成 woff/woff2 格式，由于包含了所有的字符，文件会有好几 M 大，不适合网络传输。可以借助特定的工具提取用到的字符合并到字体文件 woff/woff2 中。

## 步骤

### 提取和转换

使用 [glyphhanger](https://github.com/filamentgroup/glyphhanger)

```bash
glyphhanger --whitelist="你好" --formats=woff2,woff --subset=input.ttf
```

### 优化

[Web Font Optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)

浏览器渲染页面流程

![browser-render](/assets/browser-render.png)

## 参考
https://shkspr.mobi/blog/2013/05/subsetting-chinese-fonts/


<h2>介绍</h2>
<p>网页中如果使用了用户本地所没有的字体，需要通过 webfont 的方式提供在线字体。webfont 目前支持 woff 和 woff2 格式。</p>
<p>如果直接通过 ttf 格式转换成 woff/woff2 格式，由于包含了所有的字符，文件会有好几 M 大，不适合网络传输。可以借助特定的工具提取用到的字符合并到字体文件 woff/woff2 中。</p>
<h2>步骤</h2>
<h3>提取和转换</h3>
<p>使用 <a href="https://github.com/filamentgroup/glyphhanger" target="_blank">glyphhanger</a></p>
<pre class="language-bash"><code class="language-bash">glyphhanger --whitelist<span class="token operator">=</span><span class="token string">"你好"</span> --formats<span class="token operator">=</span>woff2,woff --subset<span class="token operator">=</span>input.ttf
</code></pre>
<h3>优化</h3>
<p><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization" target="_blank">Web Font Optimization</a></p>
<p>浏览器渲染页面流程</p>
<p><img src="/assets/browser-render.png" alt="browser-render" target="_blank"></p>
<h2>参考</h2>
<p><a href="https://shkspr.mobi/blog/2013/05/subsetting-chinese-fonts/" target="_blank">https://shkspr.mobi/blog/2013/05/subsetting-chinese-fonts/</a></p>

CL's Blogs

Webfont 优化

介绍

步骤

提取和转换

优化

参考