CSS 中 @import url("//fonts.googleapis.com/css?family=Ubuntu"); 國內訪問極慢或失敗。
| 方案 | 優點 | 缺點 | 適用場景 |
|---|---|---|---|
| 360/字節/騰訊 Google Fonts 鏡像 | 零成本、無需自建、CDN 加速 | 部分鏡像不穩定、字體子集可能不全 | 個人/中小項目、快速接入 |
| 本地化字體文件 | 完全可控、離線可用、性能最優 | 需手動下載、處理格式、版權合規 | 生產環境、對性能敏感、版權允許 |
| font-display: swap | 字體加載期間顯示 fallback，體驗不降級 | 不解決加載失敗，僅緩解閃爍 | 配合上述方案使用 |
| 自建反向代理 | 可控、可緩存、支援全部字體 | 需服務器、維護成本 | 企業級、大流量 |
/* 原始 */
@import url("//fonts.googleapis.com/css?family=Ubuntu");
/* 替換 */
@import url("//fonts.useso.com/css?family=Ubuntu"); /* 360 鏡像，現已遷移至 fonts.useso.com */
/* 或 */
@import url("//cdn.staticfile.org/google-fonts/ubuntu/latest/css.css"); /* Staticfile CDN */
woff2/woff 並生成 CSS。/fonts/，CSS 中 @font-face 指向相對路徑。font-display: swap; 避免白屏。Google Fonts 多為 OFL 開源協議，允許商業使用、修改、重新分發。第三方鏡像字體文件同樣受 OFL 保護，合規使用無憂。
