一、文檔目的

本規(guī)范旨在為網(wǎng)站設(shè)計(jì)、前端開發(fā)、內(nèi)容編輯等相關(guān)人員提供一致、清晰、專業(yè)的字體使用標(biāo)準(zhǔn)，確保網(wǎng)站在不同設(shè)備、語(yǔ)言環(huán)境下具備良好的可讀性與品牌統(tǒng)一性。

二、基礎(chǔ)字體設(shè)置

1. 主字體（Primary Font）

• 字體名稱：Roboto

• 字體類型：無襯線字體（Sans-serif）

• 用途：全站正文、段落、按鈕、導(dǎo)航等主要內(nèi)容區(qū)域

2. 輔助字體（Secondary Font）

• 字體名稱：Playfair Display

• 字體類型：襯線字體（Serif）

• 用途：首頁(yè)主標(biāo)題、品牌口號(hào)、引用語(yǔ)、強(qiáng)調(diào)文本

3. 備用字體棧（Fallback）

font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;

三、字號(hào)與層級(jí)規(guī)范

四、字體顏色規(guī)范

五、響應(yīng)式字體規(guī)則

為適配不同屏幕設(shè)備，建議使用 CSS 的 clamp() 函數(shù)設(shè)置字體大小。

示例：

h1 {
  font-size: clamp(24px, 5vw, 32px);
}

?? 說明：此語(yǔ)法表示字體大小在 24px 到 32px 之間，根據(jù)視口寬度自動(dòng)縮放。

六、字體使用規(guī)范

1. 全站最多使用兩種字體，避免風(fēng)格混亂。

2. 字重使用 400（常規(guī)）、500（中等）、700（加粗），不建議頻繁使用 900。

3. 禁止使用全部大寫（ALL CAPS）作為段落正文，除非用于品牌標(biāo)志。

4. 所有圖像中的文字內(nèi)容，應(yīng)與網(wǎng)頁(yè)所使用字體一致。

5. 使用 font-display: swap; 以防止文字閃白。

七、Web 字體加載建議

• 推薦使用 Google Fonts 提供的壓縮字體鏈接；如有性能要求，可下載字體文件進(jìn)行本地托管。

• 字體格式建議支持：woff2 優(yōu)先，其次為 woff

示例代碼：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

八、多語(yǔ)言適配建議

九、異常處理與兼容性測(cè)試

• 使用字體加載監(jiān)控工具（如FontFaceObserver）提升字體加載控制

• 所有字體應(yīng)在主流瀏覽器（Chrome, Safari, Firefox, Edge）上測(cè)試顯示兼容性

• 對(duì)于不支持Web字體的設(shè)備，應(yīng)降級(jí)為系統(tǒng)字體棧

十、附錄：設(shè)計(jì)工具內(nèi)置字體對(duì)應(yīng)建議

本規(guī)范文件可用于交付前的前端走查、UI審核、品牌標(biāo)準(zhǔn)落地檢查。