在网页开发中，控制文字外观主要依赖CSS的字体相关属性。这些属性分散在font系列简写与独立声明中，理解它们的优先级和继承规则，才能写出稳定且易维护的样式。
一、基础字体属性分类
CSS字体样式可以分为两类：一类是控制字形本身的，例如字族、大小、粗细；另一类是控制排版细节的，例如行高、间距、修饰线。独立属性让调整更精确，而font简写则适合一次性设置多个值。
需要注意的是，font简写必须包含font-size和font-family，且顺序有严格要求，否则整条声明会被浏览器忽略。很多线上样式表出错，就是因为简写顺序颠倒导致后续规则失效。
1.1 字族与回退机制
font-family用来指定文字使用的字体。由于用户设备字体不全，必须提供回退列表。通常先写具体字体，再以通用族（如sans-serif）结尾。
下面代码展示了中文与英文混排时的常见写法，先尝试系统无衬线字体，再回退到跨平台通用族，避免在某些Linux环境下出现衬线字体突兀的问题。
/* 字体回退示例 */
body {
font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
1.2 字号与单位选择
font-size决定文字高度。推荐使用相对单位如rem或em，以便配合用户缩放与响应式布局。绝对单位px在需要像素级对齐时仍有价值，但会削弱无障碍支持。
以下示例用rem定义基础字号，并通过媒体查询在窄屏下缩小，保证移动端阅读舒适。这种写法比写死px更利于后期统一调整。
html { font-size: 16px; }
.text { font-size: 1rem; }
@media (max-width: 600px) {
html { font-size: 14px; }
}
二、常用独立字体样式代码
除了基础属性，以下几项在项目中高频出现，它们各自解决一类具体的视觉或可读性需求。
2.1 字重与斜体
font-weight控制粗细，可用数字100到900或关键字normal、bold。并非所有字体都包含九级字重，缺失时会向邻近值靠拢。font-style则切换normal、italic与oblique，中文一般无真正斜体，浏览器多用倾斜模拟。
下面的代码给标题加粗、给引用块加斜体，并注明如果字体不支持italic，oblique可作为兜底。
h2 { font-weight: 700; }
blockquote { font-style: italic; }
.fallback { font-style: oblique; }
2.2 行高与间距
line-height影响行框高度，无单位的数值（如1.5）会基于当前字号计算，便于继承。letter-spacing与word-spacing分别调整字间与词间距离，中文排版常需轻微字距来提升清晰度。
示例里将正文行高设为1.6，字距设为0.02em，在多数屏幕上能明显降低拥挤感。
p {
line-height: 1.6;
letter-spacing: 0.02em;
}
2.3 修饰与大小写
text-decoration可加下划线、删除线，CSS3起支持设置线型与颜色。text-transform转换大小写，对英文界面很有用，但不会改变DOM中的实际文本。
a { text-decoration: underline dotted #999; }
.upper { text-transform: uppercase; }
三、font简写与优先级
font简写格式为：font-style font-variant font-weight font-size/line-height font-family。任何遗漏必填项都会让声明无效。简写会重置未提及的字体属性为初始值，因此单独写过letter-spacing的元素若使用简写，间距会被清掉。
下面用简写一次性设置斜体、粗体、带行高的字号与字族，等效于上面多个独立声明，但更紧凑。
.title {
font: italic 700 1.25rem/1.4 "PingFang SC", sans-serif;
}
| 属性 | 作用 | 常见取值 |
|---|---|---|
| font-family | 设定字族与回退 | 微软雅黑, Arial, sans-serif |
| font-size | 控制字号 | 16px, 1rem |
| font-weight | 字重 | normal, bold, 400 |
| line-height | 行高 | 1.5, 24px |
四、实践建议
在真实项目中，建议将字体基础设置放在根元素，利用继承减少重复。需要特殊效果的组件再局部覆盖。同时用text-rendering: optimizeLegibility开启字距调整，能让小字号英文更清晰，但会带来轻微性能开销，不宜全站强制。
最后给出一段综合示例，包含基础字体栈、正文排版与标题样式，可直接作为样式表起点。修改时只需调整变量部分，即可适配不同产品调性。
:root {
--font-base: "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
font-family: var(--font-base);
font-size: 16px;
line-height: 1.6;
color: #333;
}
h1 {
font: 700 2rem/1.2 var(--font-base);
letter-spacing: 0.01em;
}
cssfont_styletext_rendering修改时间：2026-08-06 19:12:42