be5invis/Sarasa-Gothic

可否增加适合于网页的瘦身版字体文件

DearTanker opened this issue · 5 comments

DearTanker commented

找了好多年了没有找到一个适合全平台的严格等宽中英文混合字体。
再网站上用了一段时间的完整 mono 字体，除了每次网页要加载十几兆的完整字体比较慢以外，显示效果完美。
特别是极其适合用在 code 和 pre 标签内。

考虑到要完整支持所有简体字确实字体要那么大，所以如果能大幅缩减不常用汉字，只保留 3500 常用汉字，是不是可以大幅缩减字体文件的大小，使之更加适合 Web 环境。

cwchien commented

您好：
關於您的需求，可以參考 allanguys/font-spider-plus (字蛛+) 這個工具，它可以根據網頁中所用文字抽取所用字體。

步驟如下：

  1. 您必須安裝 font-spider-plus 的 npm 套件 (根據您所用的套件管理工具，擇一執行即可)
# npm
npm i font-spider-plus -g
# pnpm
pnpm add -g font-spider-plus
# yarn
yarn global add font-spider-plus
  1. 下載我已經寫好用來產生字體的 html 檔 (不放心的話可以先用防毒軟體掃過)

內容所用的 3500 常用漢字取自 elephantnose/characters/3500常用汉字.txt

壓縮檔：fsp.zip

  1. 解壓縮後，將 Sarasa Mono SC 各字體 TTF 檔複製到 fsp 資料夾裡，並依下列方式命名

也可以依您習慣的方式命名，不過就要修改 html 裡面的參照了

1

  1. 在 fsp 資料夾內執行下列指令

它執行需要一兩分鐘，雖然看起來好像當掉一樣，但請給它一點時間，執行完畢後會顯示完成訊息

fsp local *.html
  1. 執行完畢後，在 fsp 資料夾內就會出現各種格式的字體檔，若要獲得最佳載入體驗，可使用 WOFF2 格式

可以看到抽取並壓縮後只剩下不到 1MB，效果相當良好
2

  1. 就連原本的 TTF 檔抽取後也只剩下不到 2MB

原本的 TTF 原檔會移到 .font-spider 資料夾底下
3

  • 👍1
DearTanker commented

@cwchien 非常感谢，这个可以试试。

DearTanker commented

@cwchien 你这个 html 文件中仅有常用的简体汉字，没有英文字母及常用符号，是不是需要额外添加英文字母及符号到 html 文件中才可以在输出的裁剪字体中保留英文字母及符号？

cwchien commented

@DearTanker 經您提醒，我用 Glyph Inspector 才發現輸出的檔案沒有西文及符號，看來 html 要把所有需要的字符列出才行

我再調整一下

be5invis commented

You can generate this by using hb-subset, which is a universal font subsetting tool.
Resolve as external.

  • 👍1