親愛的 我把字型檔縮小了
問題
當你的網站是在 Vercel 上部署,你又有用到 @vercel/og
來生成 Open Graph 圖片,並且在圖片上使用了自定義字型檔,這時候你可能會遇到一個問題:
Error: The Edge Function "api/og/[title]" size is 1.62 MB and your plan size limit is 1 MB. Learn More: https://vercel.link/edge-function-size
問題的原因是
@vercel/og only supports the Edge runtime.
而 Edge runtime 的客家方案限制是 1MB,然後你的字型檔實在是太大了...
解法
- 安裝工具
npm install -g glyphhanger
pip install fonttools
- 準備字型檔:
main-font.otf
- 要打包到子集字型的文字,寫在一個 txt 文件裡:
text.txt
(暫存用),把文字貼到 Online Unicode Converter (opens in a new tab) 產出 unicode - 請 chatgpt 把產出來的 unicode 組進這串指令,記得要請他濾掉
0020-007E
的部分,不放心就自己兜,畢竟他有時候會胡謅。
pyftsubset main-font.otf --output-file=subset-font.otf --unicodes=U+0020-007E,U+...
ta-da!你的字型檔已經縮小了,你可以把它放到你的專案裡,然後在你的 Edge Function 裡使用它。 最後壓出來的子集字型只要 16 KB,和原本的 1.62 MB 相比,整整小了 100 倍!這樣的大小應該沒理由卡 CD 了吧!?
參考資料
Open Graph (OG) Image Generation (opens in a new tab)