初试 webfont

webfont，也就是用在 web 上面的字体，最出名的莫过于 Google Fonts，在 HTML 里加几行代码就能用各种丰富的字体了，但是 Google 在国内呵呵了，所以今天当我想在工作室网站上应用 webfont 的时候，DIY 了一把，记录如下。

2018 年的补充说明

2014 年的项目，最近才看到：https://google-webfonts-helpe... ，可以帮助打包 Google Fonts 的源文件到本地，自己 host。

字体文件太大

首当其冲的问题就是文件太大——一个英文字体接近 1 兆，对于只想用 26 个英文字母的情况，情何以堪啊。

这里建议使用 FontForge，一款开源的字体编辑软件。打开一看果不其然，原来这是个孟加拉语的字体。由于我想只保留 Latin-1 编码集的字符，所以用了一下办法将多余编码集字符剔除：

1. 菜单里点 Element -> Font Info...，打开下图中的对话框；
2. 点选 Unicode Ranges；
3. 试着点选字符集来查看；

   

4. 右键点击任意选中字符，点 Clear 进行剔除；
5. 完成之后，先保存成为 FontForge 自己的格式 .sfd；
6. 退出重新打开这个 .sfd 文件，这时再进入上图中的对话框，才能看到删掉的字符集已经不见了；
7. 点击对话框中蓝色的链接 OS/2 -> Charsets 进入另一个选项卡，再次手动选择您需要的字符集；
8. 最后生成 .ttf 格式的字体备用：File -> Generate Fonts...，这里可以参照 Google Font Wiki 里的第 12 至第 14 步。

剔除了多余的字符，字体文件直降至几十 KB，差不多了。

在发现上述方法之前，我试了只将需要的字符拷贝出来，粘贴到一个空白的字体文件中。后来发现有诸多问题，比如字符间距不对、字符集不全（漏了 32 号的空格）等等，才逐渐找到了前述方法。

浏览器兼容性

看过 Google Font 使用时的部分源码（http://fonts.googleapis.com/c...），还以为把 .ttf 文件转成 .woff2 格式的就够了呢：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/K88pR3goAWT7BTt32Z01m1tXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

为此我还找了半天 .ttf 如何转换为 .woff2 ……原来，/css?family=xxx 这个 URL 是个动态资源，服务器会根据浏览器 User-Agent 字段值的不同，而给出不同的 CSS，不同的浏览器可能就对应了不同的字体格式文件。

我以为是 Google 用的 Web Font Loader 能自动生成这些，于是又去各种找，后来发现 Web Font Loader 更多是关注加载的平顺性等高级功能，虽支持自制第三方字体资源，但并没有工具去生成。后来我就发现了：

一站式生成器

http://www.fontsquirrel.com/t...

就是这个。把 .ttf 之类的字体文件上传上去，它会自动转换成各种浏览器需要的字体格式，然后生成 CSS 文件，最后打一个 zip 包直接下载。把 *-webfont.* 和 stylesheet.css 拷出来用，就全都搞定啦！

跨域

顺风顺水做完了本地测试，部署到公网服务器上，搭建 CDN，咦，字体不起作用了！打开浏览器控制台，看到了报错如下：

Font from origin 'http://cdn.decentfox.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://decentfox.com' is therefore not allowed access.

原来是字体跨域不能用。经查，只要字体文件的 HTTP 响应头中加上 Access-Control-Allow-Origin，允许源站访问就好了。Nginx 配置如下：

    location /static {
        alias /home/fantix/......../static;
        location ~* \.(eot|svg|ttf|woff|woff2)$ {
            add_header Access-Control-Allow-Origin *;
        }
    }

这里偷懒用了个 *，谁都能用了。刷新 CDN，新加的 header 信息成功代理出去了，至此大功告成。

总结

用 FontForge 修改字体、用 Font Squirrel 一站式处理，最后如果跨域记得加 Access-Control-Allow-Origin。有机会应该再试一下用 Web Font Loader 来加载字体。