Web 字體

主題

1. Web 字體的基本概念
   • 介紹網頁字體的種類與使用時機
2. Web 字體的實現方法
   • 如何將自定義字體應用到網頁中
3. 字體性能優化
   • 提升網頁字體加載效率的技巧

關鍵概念

1. 字體類型
   • 系統字體：用戶設備預裝的字體（如 Arial、Times New Roman）
   • Web 安全字體：跨平台兼容性高的字體（如 Verdana、Georgia）
   • 自定義字體：通過 @font-face 加載的外部字體
2. Web 字體格式
   • TTF/OTF：傳統字體格式，兼容性好但文件較大
   • WOFF/WOFF2：專為網頁優化的格式，壓縮率更高
   • EOT/SVG：舊版瀏覽器支持的格式（逐漸淘汰）
3. 實現方法
   • @font-face 自定義導入：

css

复制

@font-face {

font-family: ‘MyFont’;

src: url(‘myfont.woff2’) format(‘woff2’);

}

1. • 第三方字體服務：Google Fonts、Adobe Fonts 等 CDN 服務
2. 字體載入策略
   • FOIT（Flash of Invisible Text）：字體未載入時隱藏文字（預設行為）
   • FOUT（Flash of Unstyled Text）：先顯示備用字體，再替換（font-display: swap）
3. 性能優化技巧
   • 使用 preload 提前加載關鍵字體：

html

复制

<link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin>

运行 HTML

1. • 子集化字體（僅保留需要的字符）
   • 限制字體數量與字重（避免加載多個變體）
2. 排版最佳實踐
   • 使用 font-family 定義字體堆疊（fallback 機制）
   • 通過 font-weight 和 font-style 調整粗細與斜體
   • 使用 line-height 和 letter-spacing 改善可讀性

總結

這篇文章全面介紹了 Web 字體的技術與實踐：

1. 技術全面：涵蓋字體格式、加載方法和性能優化
2. 實用導向：提供可直接應用的代碼範例（如 @font-face 和 preload）
3. 性能優先：強調字體載入對網頁性能的影響及優化方案
4. 設計考量：兼顧視覺效果與用戶體驗（如 FOUT 策略）

適合希望提升網頁排版品質的前端開發者，從基礎實現到進階優化均有涉獵，幫助開發者在美觀與性能間取得平衡。

延伸應用：可結合 CSS 變數（var(–font-main)）或變數字體（Variable Fonts）實現更靈活的排版控制。