Teachify 課程單元 iframe 實測

🎨 iframe 能不能吃 Icon Font？實測實驗室

本頁面透過 <iframe> 內嵌於課程單元中，驗證主流 Icon Font 載入狀況與 Canvas 繪圖渲染支援。

⏳ 正在檢測字體載入狀態...
1. Google Material Symbols
檢測中...
star 20px
lightbulb 28px
thumb_up 38px
workspace_premium 28px
來源：Google Fonts 官方 CDN family=Material+Symbols+Outlined
2. Font Awesome 6 Free
檢測中...
20px
28px
38px
28px
來源：cdnjs font-awesome/6.5.1/css/all.min.css
3. Bootstrap Icons
檢測中...
20px
28px
38px
28px
來源：jsdelivr bootstrap-icons@1.11.3
4. Remix Icon
檢測中...
20px
28px
38px
28px
來源：jsdelivr remixicon@4.2.0
⭐ 對照組：原生 Inline SVG（無需下載字體，100% 零依賴）
完全原生
20px
28px
38px
28px
特性：無字體下載延遲、無 CORS 限制、html2canvas 截圖百分之百 1:1 印刷級精確再現。

📸 實測 2：Icon Font 能不能被 html2canvas 繪製與匯出？

點擊下方按鈕，即時測試瀏覽器能否將 iframe 內的 Icon Font 轉成 Canvas 圖檔（驗證測驗報告下載功能）：

🎉 Canvas 圖檔生成成功！如下所示（確認 Icon 是否有缺漏或方塊）：
💡 關鍵技術結論：
1. iframe 是獨立的瀏覽器上下文（Browsing Context）：在 iframe 內部使用 <link rel="stylesheet"> 載入 Google Fonts、Font Awesome、Bootstrap Icons 等，由瀏覽器直接對 CDN 請求字體，外層的 Teachify 單元頁完全無法阻擋或過濾。
2. 截圖下載注意點：如果您的測驗頁面包含「下載圖檔（如 A4 診斷報告）」功能，使用 Icon Font 時必須等待 document.fonts.ready 完成後再執行 html2canvas，否則容易因非同步字體未到位而出現空白或方框；若要保證 100% 絕對穩定，Inline SVG 是最無懈可擊的選擇。