初試 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 來加載字體。