CSS 字体样式是控制网页文字外观的核心，通过font-family、font-size、font-weight、font-style等属性，可快速定义文字的字体、大小、粗细和斜体效果。本文结合极简实战代码，详解字体样式的核心用法，新手可直接复制上手。
一、CSS 字体样式核心代码示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字体样式实战</title>
<style>
/* 控制div内文字的字体样式 */
div {
/* 1. 字体类型：楷体 */
font-family: 楷体;
/* 2. 字体大小：16像素（网页常用默认值） */
font-size: 16px;
/* 3. 字体粗细：加粗 */
font-weight: bold;
/* 4. 字体样式：斜体 */
font-style: italic;
}
</style>
</head>
<body>
<div>这是一段文本（楷体、16px、加粗、斜体）</div>
</body>
</html>二、核心字体属性详细说明
| 属性名 | 取值说明 | 常用值 / 示例 |
|---|---|---|
font-family |
字体类型（优先使用第一个，无则向下匹配） | 中文字体：楷体、微软雅黑、宋体；英文字体：Arial、Courier New、Times New Roman；兜底写法：font-family: 楷体, "微软雅黑", Arial, sans-serif; |
font-size |
字体大小 | 像素：16px（推荐）、20px；相对单位：1em（等于父元素字体大小）、1.2rem（等于根元素字体大小）；百分比：120% |
font-weight |
字体粗细 | 关键字：normal（默认，400）、bold（加粗，700）；数字：100-900（400=normal，700=bold） |
font-style |
字体样式（斜体 / 正常） | normal（默认，正常）、italic（斜体）、oblique（倾斜，与 italic 类似） |
实用扩展：多字体兜底 + 简写
div {
/* 简写：字体样式 → 粗细 → 大小 → 字体类型（顺序固定） */
font: italic bold 16px 楷体, "微软雅黑", sans-serif;
}三、关键注意事项
- 字体兼容性 ：
- 中文字体需确保用户电脑安装对应字体（如 "楷体" 在 Windows 默认存在，Mac 需确认）；
- 建议添加兜底字体（如
sans-serif无衬线字体），避免字体缺失导致样式错乱。
- font-size 单位选择 ：
- 网页开发优先用
px（固定尺寸，兼容性好）或rem（适配移动端），避免用pt（打印单位，网页显示不一致）。
- 网页开发优先用
- font-weight 数字值 ：
- 仅支持 100/200/300/400/500/600/700/800/900，非整百数字会被四舍五入（如 550≈600）。
- italic vs oblique ：
italic是字体自带的斜体样式（更美观），oblique是强制倾斜（无斜体字体时可用）。
四、典型应用场景
- 正文排版 ：
font: normal 400 16px "微软雅黑", Arial, sans-serif;（清晰易读）； - 标题样式 ：
font: bold 700 24px 楷体, serif;（加粗醒目）； - 强调文本 ：
font: italic 600 18px "微软雅黑";（斜体 + 半加粗，突出重点）。
总结
- CSS 字体核心样式包括
font-family（字体）、font-size（大小）、font-weight（粗细）、font-style（样式）； font-family建议写兜底字体，font-size优先用px/rem，font-weight用bold/normal或数字 400/700；- 可通过
font简写属性合并多个字体样式，简化代码。