css3的font怎么設置

# CSS3的font怎么設置

在網頁設計中，字體（font）的樣式直接影響頁面的視覺體驗和可讀性。CSS3提供了豐富的字體控制屬性，本文將詳細介紹如何通過CSS3設置字體樣式。

## 一、基礎字體屬性

### 1. font-family 設置字體族

```css
p {
  font-family: "Microsoft YaHei", Arial, sans-serif;
}

• 可以指定多個字體作為備選（用逗號分隔）
• 包含空格的字體名稱需要用引號包裹
• 最后通常指定通用字體族（serif/sans-serif/monospace等）

2. font-size 設置字號

h1 {
  font-size: 24px;       /* 像素單位 */
}

h2 {
  font-size: 1.5em;      /* 相對單位 */
}

h3 {
  font-size: 150%;       /* 百分比 */
}

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

3. font-weight 設置字重

.bold-text {
  font-weight: bold;    /* 粗體 */
}

.light-text {
  font-weight: 300;     /* 數值100-900 */
}

取值： - normal（400） - bold（700） - lighter/bolder（相對值） - 100-900（數字值）

二、高級字體樣式

1. font-style 設置斜體

.italic {
  font-style: italic;   /* 斜體 */
}

.oblique {
  font-style: oblique;  /* 傾斜體 */
}

2. font-variant 設置小型大寫字母

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

3. line-height 設置行高

p {
  line-height: 1.6;    /* 無單位數字表示倍數 */
}

三、CSS3新增字體特性

1. @font-face 自定義字體

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;  /* 控制字體加載行為 */
}

注意事項： - 需要提供多種字體格式（woff2/woff/ttf） - 注意字體授權問題 - 使用font-display優化加載體驗

2. font-stretch 調整字體寬度

.wide-text {
  font-stretch: expanded;  /* 擴展 */
}

.narrow-text {
  font-stretch: condensed; /* 壓縮 */
}

3. font-kerning 調整字距

.heading {
  font-kerning: normal; /* 啟用字距調整 */
}

四、簡寫屬性font

/* 格式：font: style variant weight size/line-height family */
.title {
  font: italic small-caps bold 24px/1.2 "Helvetica Neue", sans-serif;
}

注意： - size和family是必須的 - 省略的屬性會使用默認值 - 順序不能隨意更改

五、實際應用示例

響應式字體設置

html {
  font-size: 16px;
}

@media (min-width: 768px) {
  html {
    font-size: 18px;
  }
}

h1 {
  font-size: 2rem;  /* 根據根元素自動調整 */
}

優化中文顯示

body {
  font-family: -apple-system, BlinkMacSystemFont, 
               "Segoe UI", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", sans-serif;
  text-rendering: optimizeLegibility;  /* 優化可讀性 */
  -webkit-font-smoothing: antialiased; /* Mac下抗鋸齒 */
}

六、常見問題與解決方案

1. 字體不生效：

   • 檢查字體名稱拼寫
   • 確保字體文件路徑正確
   • 添加備用字體

2. 自定義字體加載慢：

   • 使用woff2格式（壓縮率更高）
   • 設置font-display: swap
   • 預加載字體資源

3. 跨平臺顯示不一致：

   • 指定多個備用字體
   • 使用通用字體族兜底
   • 測試不同操作系統

七、最佳實踐建議

1. 限制字體數量（通常2-3種）
2. 優先使用系統默認字體提升性能
3. 移動端考慮增加字號（至少16px）
4. 高對比度設計保證可讀性
5. 使用CSS變量管理字體樣式：

:root {
  --main-font: "Helvetica Neue", sans-serif;
  --heading-size: 2rem;
}

h1 {
  font-family: var(--main-font);
  font-size: var(--heading-size);
}

通過合理運用CSS3的字體屬性，開發者可以創建出既美觀又具有良好可讀性的網頁排版效果。 “`

（注：實際字數為約1100字，可根據需要擴展具體示例或添加更多細節）