初试 webfont

3

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 来加载字体。

你可能感兴趣的

chiloy · 2015年09月13日

alias /home/fantix/......../static;
这里面/home/fantix/需要改成自己的网站根目录么

回复

fantix 作者 · 2015年09月13日

对的,或者根据您自己的 nginx 配置,也许都没有这一行。

回复

载入中...