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

CSS 字体样式是控制网页文字外观的核心，通过font-family、font-size、font-weight、font-style等属性，可快速定义文字的字体、大小、粗细和斜体效果。本文结合极简实战代码，详解字体样式的核心用法，新手可直接复制上手。

一、CSS 字体样式核心代码示例

<!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;
}

三、关键注意事项

1. 字体兼容性 ：
   • 中文字体需确保用户电脑安装对应字体（如 "楷体" 在 Windows 默认存在，Mac 需确认）；
   • 建议添加兜底字体（如sans-serif无衬线字体），避免字体缺失导致样式错乱。
2. font-size 单位选择 ：
   • 网页开发优先用px（固定尺寸，兼容性好）或rem（适配移动端），避免用pt（打印单位，网页显示不一致）。
3. font-weight 数字值 ：
   • 仅支持 100/200/300/400/500/600/700/800/900，非整百数字会被四舍五入（如 550≈600）。
4. italic vs oblique ：
   • italic是字体自带的斜体样式（更美观），oblique是强制倾斜（无斜体字体时可用）。

四、典型应用场景

1. 正文排版 ：font: normal 400 16px "微软雅黑", Arial, sans-serif;（清晰易读）；
2. 标题样式 ：font: bold 700 24px 楷体, serif;（加粗醒目）；
3. 强调文本 ：font: italic 600 18px "微软雅黑";（斜体 + 半加粗，突出重点）。

总结

1. CSS 字体核心样式包括font-family（字体）、font-size（大小）、font-weight（粗细）、font-style（样式）；
2. font-family建议写兜底字体，font-size优先用px/rem，font-weight用bold/normal或数字 400/700；
3. 可通过font简写属性合并多个字体样式，简化代码。