Note

html-to-image的字型處理

html-to-image這個package，他在處理字型的時候是這樣的：

  1. 掃描樣式規則：它會掃描頁面載入的所有樣式表 (document.styleSheets)，找出 @font-face 規則，以便得知字型名稱與其對應的字型檔案 URL（例如 .woff2 檔案）。
  2. 讀取並內嵌字型：接著，它會去下載 @font-face 中 src 指向的字型檔案，將其轉換成 Base64 格式的 Data URI。
  3. 產生內嵌字型的 SVG：最後，將這個帶有 Data URI 的 @font-face 規則一起寫入它內部產生的 SVG 中，再將 SVG 轉繪到 Canvas 上，最終輸出成 PNG 或 JPEG。

問題在第二點，google font會檔script抓的CORS。 你可能會發現「報錯了，但結果font是正常的」，但那是他取得render component外的browser cache字型來處理。這會有race condition的問題，不能依靠。

解法：

  1. 自己下載，自己host
  2. 如果是google font的話，可以用bunnyCDN的免費相容font host，他們有Access-Control-Allow-Origin: *

'25, Nov 19