使用@font-face 加載自定義字體需注意語法、格式兼容和性能優(yōu)化。 1. 正確寫法包括指定字體名稱、多格式路徑（如woff2、woff）、設(shè)置font-weight 和font-style，並使用相對路徑或CDN；2. 優(yōu)先選擇woff2 格式，其次woff，可通過工具轉(zhuǎn)換字體格式；3. 性能方面應(yīng)限製字符集與變體數(shù)量，使用font-display: swap 避免空白文本；4. 自託管可提升控制力與隱私保護(hù)，但需自行處理文件配置與服務(wù)器MIME 類型支持。

用@font-face加載自定義網(wǎng)頁字體，是很多網(wǎng)站實(shí)現(xiàn)個性化字體風(fēng)格的常見做法。關(guān)鍵在於寫法正確、格式兼容、加載性能合理。

1. 基本語法和結(jié)構(gòu)

@font-face的核心作用是告訴瀏覽器從哪加載字體文件，並指定一個名字供後續(xù)CSS 使用?；緦懛ㄈ缦拢?

 @font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

使用時只需要在樣式中調(diào)用這個名字：

 body {
  font-family: 'MyCustomFont', sans-serif;
}

需要注意幾點(diǎn)：

• 盡量提供多種格式（如woff2、woff），確保兼容性。
• 不要遺漏font-weight和font-style ，否則某些系統(tǒng)可能無法識別變體。
• 字體路徑要準(zhǔn)確，推薦使用相對路徑或CDN 路徑。

2. 字體格式選擇與轉(zhuǎn)換

目前主流推薦優(yōu)先使用.woff2 ，它壓縮率高、加載快，其次是.woff 。舊版瀏覽器可能會需要.ttf或.eot ，但現(xiàn)在可以忽略這些了。

如果你只有.ttf或.otf文件，可以通過工具轉(zhuǎn)成Web 友好格式：

• Font Squirrel @font-face Generator
• Transfonter

生成後通常會得到多個格式的字體文件以及對應(yīng)的CSS 片段，直接複製進(jìn)你的樣式表即可。

3. 性能與加載優(yōu)化

加載自定義字體會影響頁面渲染速度，尤其是大字體文件或者網(wǎng)絡(luò)較慢的情況下。

一些優(yōu)化建議：

• 只加載需要的字符集：比如你只需要英文數(shù)字，就不要包含所有語言的字形。
• 限製字體變體數(shù)量：每個@font-face都是一次請求，盡量合併或減少不必要的粗體、斜體聲明。
• 使用font-display控制顯示行為：可以在@font-face中添加這個屬性，控製字體加載過程中的展示策略，例如：

 @font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 推薦值*/
}

swap表示先用系統(tǒng)字體顯示，等自定義字體加載完成再替換，避免空白文本的問題。

4. 自託管vs 使用服務(wù)（如Google Fonts）

很多人一開始會用Google Fonts 這類服務(wù)來引入字體，簡單方便。但如果你想完全掌控字體資源，或者出於隱私考慮，自託管是個不錯的選擇。

自託管的優(yōu)勢：

• 更可控，不依賴第三方
• 減少外部請求，提升加載一致性
• 支持更個性化的字體定制

缺點(diǎn)也明顯：

• 需要自己處理字體文件、格式??轉(zhuǎn)換
• 需要服務(wù)器配置MIME 類型（有些主機(jī)默認(rèn)不支持字體類型）
• 初期設(shè)置稍微複雜一點(diǎn)

基本上就這些。只要注意格式兼容、加載方式和性能影響，用@font-face實(shí)現(xiàn)自定義字體其實(shí)並不難，只是容易忽略細(xì)節(jié)。

以上是使用 @font-face CSS規(guī)則實(shí)現(xiàn)自定義Web字體的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！