Web Fonts

自建中文 Web Fonts

Edmond Yip

Edmond Yip

— 4 min read
自建中文 Web Fonts

Update

  • 18 Oct 2017 | v0.0.1 基本測試完成
  • 18 Oct 2017 | v0.0.2 加上字數
  • 19 Oct 2017 | v0.0.3 搜尋所有資料夾

由於現有網上的 web fonts 不能滿足我的需求，所以決定自己 Fonts 自己 host 。
具體做法如下：

flow-80

  1. 先找一隻心儀的中文Fonts
  2. 偵測網站中 Heading1 用的字元
  3. 在 Fonts file 中抽取有使用的字元
  4. 把己抽取的字型壓縮及轉換成不同 Web fonts format
  5. 在 html 讀取 web fonts 格式

這樣做最大的好處就是字體檔極細，而且己經預先輸出不用再即時生成，所以讀取也很快

看似簡單但也花了我不少時間，由於我正在學習 JavaScript，所以整個動作也會用 NodeJS 去完成。
我把 Project 放了在Github，可以下載整個 Project 試試看。

設定

//setting
const fileDirectory = './';
const fileExtension = 'html';
const fontsSource = './fonts/seto.ttf';
const outputPath = 'build/';
const fontsClass = 'h1';

解說

  • fileDirectory 目標資料夾 暫時只支援單層資料夾
  • fileExtension 副檔名，理論上支援 php 之類格式，但不支援變數，所以還是 html 吧...
  • fontsSource 字型原檔，暫時只支援 .ttf
  • outputPath 輸出已壓縮字體的位置
  • fontsClass 需要轉換字體的元素，支援 class/id，e.g.(.title/#title)

安裝 Package

先準備好安裝所需的 package.json

{
  "name": "ChineseFonts",
  "version": "0.0.3",
  "description": "Zip target fonts to web fonts",
  "main": "index.js",
  "dependencies": {
    "fontmin": "latest",
    "fs": "latest",
    "gulp-ttf2woff2": "latest",
    "fast-html-parser": "latest",
    "imagemin": "latest",
    "imagemin-svgo": "latest",
    "readdir": "latest"
  },
  "devtool": {
    "source-map": "latest"
  },
  "scripts": {
    "build": "node index.js"
  },
  "author": "Edmond Yip",
  "license": "MIT"
}

用 npm install 進行安裝

$ npm install
...
$ added 330 packages in 34.671s

解說

  • bluebird 處理 promoise
  • fontmin 處理字體轉換的核心
  • fs 讀取文件
  • gulp-ttf2woff2 為 fontmin 追加 woff2 檔輸出
  • fast-html-parser 快速抽取所需文字之用

建立測試頁

我做用了可以合法免費使用的瀨戶フォント作測試，是一隻可愛風的日本字體，不但有大量漢字而且也可以合法地用作web fonts。

CSS

@font-face {
  font-family: 'seto';
  src: url('../build/seto.eot');
  src: url('../build/seto.eot') format('embedded-opentype'),
  url('../build/seto.woff2') format('woff2'),
  url('../build/seto.woff') format('woff'),
  url('../build/seto.ttf') format('truetype'),
  url('../build/seto.svg') format('svg');
}

h1 {
  font-family: 'seto';
  font-size: 60px;
}

index.html

  <h1>我是超級大標題</h1>
  <p>我是小字體</p>

test.html

  <h1>第二標題</h1>
  <p>測試重覆字體</p>

運行方法

$ npm run build
$
$ > [email protected] build /var/ChineseFonts
$ > node index.js
$
$ Converted words : 我是超級大標題第二 (9)

只要設定沒問顯，就會顯示已轉換的中文字及字數。

Screen-Shot-2017-10-19-at-11.26.54-AM

再看看 index.html，成功了！

Screen-Shot-2017-10-19-at-11.41.44-AM

容量只有 3.6 kb！

比起原本的 setofont.ttf 高達13.1mb大大縮減了！
即使在網站上使用也可以快速完成！

後記

第一次開發open source，多得朋友的支援才能成功
不過此程式還有改善空間，我有時間會再update更多功能。

Read more