有哪些css font屬性

# 有哪些CSS font屬性

CSS中的font屬性是控制文本外觀的核心工具組，包含從字體族到文字裝飾的完整樣式控制體系。本文將系統介紹所有font相關屬性及其應用場景。

## 一、基礎字體屬性

### 1. font-family
定義元素中文本的字體系列，支持后備字體機制。

```css
p {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

特性： - 使用逗號分隔的字體名稱列表 - 包含空格的字體名需加引號 - 最后應指定通用字體族（serif/sans-serif等）

2. font-size

設置文本尺寸，支持多種單位：

h1 {
  font-size: 2em;  /* 相對單位 */
}

small {
  font-size: 12px; /* 絕對單位 */
}

常用單位： - px：像素 - em：相對于父元素 - rem：相對于根元素 - %：百分比單位 - vw/vh：視窗比例單位

3. font-weight

控制字體的粗細程度：

strong {
  font-weight: 700; /* 等價于bold */
}

取值： - 關鍵字：normal(400)、bold(700) - 數值：100-900（整百數）

4. font-style

定義字體樣式：

em {
  font-style: italic;
}

可選值： - normal：標準樣式 - italic：斜體字 - oblique：傾斜模擬

二、高級排版控制

1. font-variant

設置小型大寫字母：

.title {
  font-variant: small-caps;
}

擴展屬性： - font-variant-caps：控制大寫字母變體 - font-variant-numeric：數字樣式 - font-variant-ligatures：連字控制

2. font-stretch

調整字體的寬度變體：

.wide-text {
  font-stretch: expanded;
}

取值范圍： - 關鍵字：ultra-condensed到ultra-expanded - 百分比：50%-200%

3. font-kerning

控制字符間距調整：

.heading {
  font-kerning: normal;
}

4. font-variant-position

定位上標/下標：

sup {
  font-variant-position: super;
}

三、復合屬性與字體定義

1. font（復合屬性）

簡寫形式按特定順序組合屬性：

h2 {
  font: italic small-caps bold 1.2rem/1.5 "Segoe UI", sans-serif;
}

書寫順序： font-style font-variant font-weight font-size/line-height font-family

2. @font-face

定義自定義字體：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}

關鍵描述符： - src：字體資源路徑 - font-stretch：字體拉伸變體 - font-style：定義適用的字體樣式 - unicode-range：指定字符子集

四、現代CSS字體特性

1. font-display

控制字體加載期間的渲染行為：

@font-face {
  font-family: 'ModernFont';
  font-display: fallback;
}

可用策略： - auto：瀏覽器默認行為 - block：短暫阻塞期 - swap：立即使用后備字體 - fallback：極短阻塞期 - optional：可能完全不加載

2. font-synthesis

控制瀏覽器是否合成粗體/斜體：

article {
  font-synthesis: none;
}

3. font-optical-sizing

啟用光學尺寸調整：

.dynamic-text {
  font-optical-sizing: auto;
}

五、字體特征設置

1. font-feature-settings

直接訪問OpenType特性：

.oldstyle {
  font-feature-settings: "onum", "liga";
}

常用特性： - liga：標準連字 - dlig：自由連字 - tnum：表格數字 - frac：分數顯示

2. font-variation-settings

控制可變字體軸：

.variable-font {
  font-variation-settings: "wght" 650, "slnt" -10;
}

六、最佳實踐建議

1. 字體棧策略：

   • 優先使用系統字體
   • 提供至少3個后備字體
   • 最后必須包含通用字體族

2. 性能優化：

   @font-face {
    font-display: swap;
    unicode-range: U+000-5FF; /* 拉丁字符子集 */
   }
   

3. 可變字體應用： “`css :root { font-weight: 400; }

h1 { font-variation-settings: “wght” 700; }

4. **響應式排版**：
   ```css
   html {
     font-size: calc(16px + 0.3vw);
   }

七、瀏覽器支持情況

通過合理組合這些font屬性，開發者可以實現從基礎排版到高級字體渲染的全面控制，創建既美觀又高性能的網頁文本體驗。 “`

注：本文實際約1200字，可通過以下方式擴展： 1. 增加每個屬性的瀏覽器兼容性詳情 2. 補充更多代碼示例 3. 添加實際應用案例分析 4. 深入可變字體技術細節 5. 增加性能優化實測數據