Font字体样式大小设置

本文目录导读：

1. 字体大小 (font-size)
2. 字体样式 (font-style)
3. 字体粗细 (font-weight)
4. 字体族 (font-family)
5. 综合使用 - font 简写属性
6. 完整示例
7. 实用建议

我来详细介绍CSS中字体样式和大小的设置方法。

字体大小 (font-size)

单位分类

/* 绝对单位 */
font-size: 16px;      /* 像素 */
font-size: 12pt;      /* 点 (1pt = 1/72英寸) */
font-size: 1cm;       /* 厘米 */
font-size: 10mm;      /* 毫米 */
/* 相对单位 */
font-size: 1em;       /* 相对于父元素字体大小 */
font-size: 1rem;      /* 相对于根元素(html)字体大小 */
font-size: 100%;      /* 相对于父元素百分比 */
font-size: 1vw;       /* 视口宽度的1% */
font-size: 1vh;       /* 视口高度的1% */
/* 关键字 */
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: smaller;
font-size: larger;

推荐实践

/* 响应式字体大小 */
html {
  font-size: 16px; /* 基础大小 */
}
h1 {
  font-size: 2rem; /* 32px */
}
h2 {
  font-size: 1.5rem; /* 24px */
}
p {
  font-size: 1rem; /* 16px */
}
/* 移动端适配 */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

字体样式 (font-style)

/* 字体样式 */
font-style: normal;      /* 正常 */
font-style: italic;      /* 斜体 */
font-style: oblique;     /* 倾斜 (类似斜体) */
/* 示例 */
.italic-text {
  font-style: italic;
}
.oblique-text {
  font-style: oblique 15deg; /* 可指定倾斜角度 */
}

字体粗细 (font-weight)

/* 关键字方式 */
font-weight: normal;      /* 400 */
font-weight: bold;        /* 700 */
font-weight: lighter;     /* 比父元素更细 */
font-weight: bolder;      /* 比父元素更粗 */
/* 数值方式 (100-900) */
font-weight: 100;  /* Thin */
font-weight: 200;  /* Extra Light */
font-weight: 300;  /* Light */
font-weight: 400;  /* Normal */
font-weight: 500;  /* Medium */
font-weight: 600;  /* Semi Bold */
font-weight: 700;  /* Bold */
font-weight: 800;  /* Extra Bold */
font-weight: 900;  /* Black */

字体族 (font-family)

/* 通用字体族 */
font-family: serif;           /* 衬线字体 */
font-family: sans-serif;      /* 无衬线字体 */
font-family: monospace;       /* 等宽字体 */
font-family: cursive;         /* 手写体 */
font-family: fantasy;         /* 装饰体 */
/* 具体字体 + 后备字体 */
font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
/* 英文字体 */
font-family: 'Roboto', 'Open Sans', 'Segoe UI', sans-serif;

综合使用 - font 简写属性

/* 顺序: style weight size/line-height family */
font: italic bold 16px/1.5 'Arial', sans-serif;
/* 各部分分别设置 */
font: 
  [font-style]
  [font-variant]
  [font-weight]
  [font-size]/[line-height]
  [font-family];
/* 实际示例 */
font: 16px/1.6 'Helvetica Neue', Arial, sans-serif;
font: italic 1.2em/1.8 Georgia, serif;
font: bold 14px/1.4 'Microsoft YaHei', sans-serif;

完整示例

<!DOCTYPE html>
<html>
<head>
<style>
  /* 基础字体设置 */
  body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
  }
  字体 */
  h1 {
    font-size: 2.5rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2;
  }
  */
  .content {
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
  }
  /* 特殊文本 */
  .italic {
    font-style: italic;
    font-weight: 300;
  }
  .bold {
    font-weight: 700;
  }
  /* 小号文本 */
  .small {
    font-size: 0.875rem;
    font-weight: 300;
  }
  /* 等宽字体 */
  .code {
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: 0.9em;
  }
</style>
</head>
<body>
  <h1>字体设置示例</h1>
  <p class="content">这是普通正文内容</p>
  <p class="italic">这是斜体文本</p>
  <p class="bold">这是粗体文本</p>
  <p class="small">这是小号文本</p>
  <code class="code">console.log('Hello World');</code>
</body>
</html>

实用建议

1. 响应式设计：使用 rem 或 vw 单位
2. 移动优先：先设置基础大小，再用媒体查询调整
3. 字体栈：总是提供后备字体
4. 性能：限制使用自定义字体数量（@font-face）
5. 可读性：行高一般设为字体大小的1.4-1.8倍

需要我详细解释某个具体方面吗？