修正文章縮圖裡的方塊字
Context
就如同在上圖中看到的，在分享到社群服務的縮圖中，中文文字的部份會因為沒有相對應的字型，而變成方塊字。
Analysis
就如同在 關於 頁面裡所提到的，這個網站的樣板是使用 Eleventy Excellence ，裡面整合了許多不同的延伸套件，例如使用 eleventy-img 去生成優化過的靜態圖片，其中也包含了文章的社群縮圖，同時 eleventy-img 底層是使用 sharp 這個使用 libvips 與 librsvg 的 library。
在本地端的系統上，中文字都可以正常地被 render ，所以問題想必是出在 deployment 環境之中。
目前我使用的解決方案是 CloudFlare Page ，基本上就是透過 CloudFlare Worker 去編譯出靜態頁面，再佈署到 CloudFlare 自己的 CDN 上。
與其它家的 Serverless 服務，例如 AWS Lambda 一樣， Worker 的系統需要相當地輕量化，想當然爾，也就不會包含特定的字型來拖累啟動、運行速度。
Solution
根據這篇 StackOverflow 的討論 Utilizing custom font in AWS Lambda and Node.js 12.x ，我在 repo 裡加入了 Noto Sans CJK 的 ttf 字型檔，並參考了該篇的答案，在同個目錄底下新增的 fonts.conf 作為設定檔。
要注意的是，這裡必須使用絕對路徑，而與 AWS Lambda 所使用的根目錄 /var/tasks 不同， CF Page 裡是 /opt/buildhome/repo 。
在 commit 之後，也要到 CF Page 裡設定環境變數 FONTCONFIG_PATH=/opt/buildhome/repo/fonts 。
keywords: cloudflare page worker missing svg fonts fontconfig