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

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

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

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

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

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

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

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

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

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

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

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

• Font Squirrel @font-face Generator
• Transfonter

生成后通常會(huì)得到多個(gè)格式的字體文件以及對(duì)應(yīng)的 CSS 片段，直接復(fù)制進(jìn)你的樣式表即可。

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

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

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

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

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

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

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

很多人一開始會(huì)用 Google Fonts 這類服務(wù)來(lái)引入字體，簡(jiǎn)單方便。但如果你想完全掌控字體資源，或者出于隱私考慮，自托管是個(gè)不錯(cuò)的選擇。

自托管的優(yōu)勢(shì)：

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

缺點(diǎn)也明顯：

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

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

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