@plotdb/xfl

0.0.1 • Public • Published

xl-fontload

中文字型網路化。 依詞頻切割字型,並透過前端實作 lazy loading。 無需後端程式支援。

  • 字頻檔 ( word-frequency.csv ) 示範檔來源: 教育部
  • 列舉轉換字型. 放置在 fonts/ 目錄, 結構不拘. 自動搜尋所有 .ttf 結尾檔案.
  • 針對每一字型:
    • 列舉所有支援字符
    • 其中常用五百字、標點符號、英文字母、數字等,做為第一字型檔
    • 接下來,剩餘字符有出現在詞頻表中者,依字頻每一百字組成一字型檔.
    • 剩餘未對應字,每一百字組成一字型檔.
    • 所有字型檔置於同一目錄中,檔名以數字區隔.
    • 輸出字碼 / 字型檔編號對應表, 供前端快查.

Usage / Compiler

  • 此專案使用 nodejs, 請先安裝 nodejs 與 npm ,並利用 npm install 建利 node_modules 目錄。 參考指令:

    curl -sL https://deb.nodesource.com/setup_8.x | sudo bash -
    npm install
    
  • 將欲轉換的字型整理至 fonts/ 目錄,目錄結構不拘。程式會自動掃出所有字型檔。

    • 目前只吃 ttf 檔唷~啾咪。
  • 準備字型檔 word-frequency.csv

  • 執行轉換程式 compile.sh

  • 字型檔輸出於 assets/ 目錄.

Usage / Frontend

基本使用方式:

xfl.load("http://path/to/scattered/font/folder/", options, function(font) {
    font.sync(stringToDisplay);
})

根據即時內容動態載入字型的範例:

/* assume we have "textarea" variable to be an input box accepting user input */
xfl.load("http://path/to/scattered/font/folder/", options, function(font) {
   textarea.addEventListener("keyup", function() {
     font.sync(textarea.value);
   });
})

若你沒有打算自幹字型檔,可以使用我們透過 Github Pages 準備的一組字型檔,專案庫的位置在這裡,欲使用則可以透過這個網址:http://plotdb.github.io/xl-fontset/alpha/<字型名稱>,例如:

xfl.load("http://plotdb.github.io/xl-fontset/alpha/瀨戶字体", function(font) { ...

請自行將「<字型名稱>」換成欲使用的字型即可。目前支援的字型一覽可在這裡找到,包括王漢宗 42 字型、刻石錄、站酷、cwText-Q、瀨戶字体等共 57 種字型。

要注意的是目前字型檔轉換時仍有些問題,可能因此導致部份字型有缺字狀況。此外並非所有字型都包含了完整的中文字,請自行斟酌使用。

Options:

  • fontName - name used in font-family. default to be the basename of URL.
  • (TBD) text - preload files that contains text in this option.

未來方向

LICENSE

  • Font Files: All curated font files are separatedly placed in another repo (xl-fontset) and are either GPL or SIL-OFL Licensed. (OK for Commercial Use)
  • Source codes are released under MIT License.

Readme

Keywords

none

Package Sidebar

Install

npm i @plotdb/xfl

Weekly Downloads

0

Version

0.0.1

License

MIT

Unpacked Size

290 kB

Total Files

6

Last publish

Collaborators

  • tkirby