自建輕巧中文 Web Fonts

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

  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"
},
"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 
$
$ > ChineseFonts@0.0.3 build /var/ChineseFonts
$ > node index.js
$
$ Converted words : 我是超級大標題第二 (9)

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

再看看 index.html,成功了!

容量只有 3.6 kb!

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

後記

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

謝謝觀看。


Originally published at blog.256pages.com on October 19, 2017.