你好,教育部隸書

當我把教育部隸書做成烏達普拉斯插件時,我的內心是喜悅的。

那麼,甚麼是「烏達普拉斯」呢?那就是「wordpress」啦。

now 請允許寡人在此記錄一下我是如何搞的。

近日,我在友友的論壇見到他的論壇有漂亮的內嵌字體。

經過多方了解,我在這個網站知道了「用python將一個ttf字體文件挑出指定範圍的字,再導出woff2文件」的方法:

mkdir font-reduce && cd font-reduce
# Create python environment, this can be skipped.
python3 -m venv env
. env/bin/activate
# Install fonttools, I'm using 4.32.0
pip install fonttools
pyftsubset Input.ttf --output-file=Output.ttf --unicodes=U+4e00-9fff

起初,我按unicode編碼,把moeli.ttf切成了四十幾個woff2文件。本來覺的已經足夠精簡了,但是後來我找到了更為精簡的辦法…

這個辦法首先要了解教育部隸書,根據其介紹,它只做了教育部4808個常用字的字型。那麼,如果能拿到這4808個字的unicode編碼,就可以做成一個更為精簡的網頁字體…

經過寡人的一番操作,寡人拿到了4808個字的unicode編碼。經過試驗,我認為每八個字作為一個woff2文件是最合理的。

之後,我把python代碼寫進一個.sh中:

pyftsubset moeli.ttf --output-file=files/001.woff2 --unicodes=U+4e00,U+4e01,U+4e03,U+4e09,U+4e0b,U+4e08,U+4e0a,U+4e11
#此處省略599行
pyftsubset moeli.ttf --output-file=files/601.woff2 --unicodes=U+9f66,U+9f6c,U+9f6a,U+9f77,U+9f72,U+9f8d,U+9f94,U+9f9c

生成601個文件,這需要一點時間…之後打開files文件夾,裏面每個文件都是10k左右,這樣基本能夠按需加載字體了…

css文件是這樣的:

@font-face { font-family: 'moeli'; font-style: normal; font-weight: 400; font-display: swap; src: url('./files/001.woff2') format('woff2'); unicode-range: U+4e00,U+4e01,U+4e03,U+4e09,U+4e0b,U+4e08,U+4e0a,U+4e11; }
/*此處省略599行*/
@font-face { font-family: 'moeli'; font-style: normal; font-weight: 400; font-display: swap; src: url('./files/601.woff2') format('woff2'); unicode-range: U+9f66,U+9f6c,U+9f6a,U+9f77,U+9f72,U+9f8d,U+9f94,U+9f9c; }

css跟sh都需要用vim正則及縱行選擇才做出來的,畢竟有601行…當然你也可以用python的for生成文本文件…


最後說明一下,這個字體只支持繁體字中的常用字,所以不適合全局顯示。它的優點是,在實現網頁字體的同時,精簡到了極緻。

在隸書字體中,我暫時還找不到其它的開源字體,因此先拿教育部隸書來用用。雖然教育部字體(臺灣標準)有些不盡人意,但仔細看它的每個字都做的挺美觀的。日後我將拿它來突顯關鍵字

Leave a Comment