CSS 字体样式全解析：字体类型 / 大小 / 粗细 / 样式

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简写属性合并多个字体样式，简化代码。