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

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

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

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