自建輕巧中文 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.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.