CSS3字体属性详解：font-family、font-size与font简写实践
在Web开发中，字体设置是前端样式的基础。CSS3提供了多组字体属性来控制文字的外观，包括字体族、大小、粗细、样式以及变形。本文将结合实例梳理这些属性的用法与注意事项，帮助开发者正确区分字体与文本属性，并掌握font简写规则的要点。字体与文本的区别
字体指文字的具体体式（如Times、Helvetica），包含衬线、无衬线、等宽等类别；而文本指具体的内容块（如标题、段落）。CSS中字体属性描述字体的外观（类型、大小、粗斜），文本属性描述排版方式（行高、缩进、下划线）。两者不应混淆。
1. font-family：指定字体族
使用font-family可以设置首选字体及后备字体，例如：
h2 { font-family: times, serif; }
通用字体族包括：
- serif（衬线，笔画末端有装饰）
- sans-serif（无衬线，笔画末端无装饰）
- monospace（等宽，适用于代码）
- cursive（草书或手写体）
- fantasy（装饰性字体）
建议在字体列表末尾添加通用族作为保底。
2. font-size：控制字号
常用单位有px、em、百分比。浏览器默认字体大小为16px，即1em = 16px。rem单位相对于根元素（html）的字体大小，修改根元素字体后所有rem值会统一变化，适合响应式设计。示例：
h2 { font-size: 18px; }
3. font-style与font-weight：斜体与粗细
font-style取值：italic（斜体）、oblique（倾斜体）、normal（正常）。italic通常使用字体的斜体版本，oblique由普通字体倾斜模拟。
a { font-style: italic; }
font-weight取值：100~900数字，或关键字lighter、normal、bold、bolder。常用bold和normal。
a { font-weight: bold; }
4. font-variant：小型大写字母（慎用）
取值为small-caps时将小写字母显示为小型大写字母，常用于块引用或首行伪元素::first-line。
blockquote { font-variant: small-caps; }
注意：该效果可能在非英文字符中表现不佳，建议谨慎使用。
5. font简写属性
font可以将多个字体属性合并声明，但必须遵守两条规则：
- 必须包含font-size和font-family。
- 顺序为：font-weight、font-style、font-variant（三者顺序不限），然后是font-size，最后是font-family，之间用空格分隔。
示例：
p:nth-child(2) {
font: bold italic small-caps 2em sans-serif;
}
该声明等价于分别设置font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 2em; font-family: sans-serif;。
总结
CSS3字体属性是前端样式的基础模块。通过合理选择font-family后备列表、使用rem统一字号、以及利用font简写减少代码量，可以高效实现跨平台字体控制。注意区分字体属性与文本属性的职责，避免将行高或缩进误用字体属性设置。掌握这些细节，有助于编写更健壮的样式表。
Re: CSS3字体属性详解：font-family、font-size与font简写实践
感谢楼主的详细整理！字体属性这块确实是前端基础中的重点，特别是 `font` 简写顺序很多人容易搞混，你总结的“必须包含 size 和 family，顺序固定”这一点很实用。另外提一个细节：`font-variant: small-caps` 在中文环境下基本无效，这个提醒也很到位，新手可能会踩坑。 我个人习惯把 `font-size` 统一用 rem 配合根元素百分比，这样整体缩放很方便。想问一下楼主，对于 `font-weight` 的数字值，不同浏览器对 400、500 这类中间值的渲染表现一致吗？有时候感觉同样设 500，不同字体差异挺大，不知道你有没有类似的观察？Re: CSS3字体属性详解：font-family、font-size与font简写实践
感谢脚本专家分享的详细解析，特别是字体属性与文本属性的区分这一块，平时写样式时确实容易混用，理清职责后代码会更清晰。`font-variant: small-caps` 的慎用提醒也很实用，之前在小语种页面上踩过坑。关于 `font` 简写的顺序规则，之前总是记不住，这次专门记下“字体大小和字体族必填、且放在最后两位”，应该不会再错了。另外想问一下，实际项目中遇到用户系统没有安装指定字体时，你一般怎么处理 fallback 的层级？比如中文字体搭配英文字体时有没有推荐的后备顺序？Re: CSS3字体属性详解：font-family、font-size与font简写实践
感谢分享，写得很清晰！字体与文本属性的区别确实容易混淆，之前总把行高塞进font简写里报错才意识到。另外你提到的font简写顺序规则很实用，尤其是必须包含size和family这点，新手很容易漏。想问一下，在实际项目中大家一般怎么选后备字体？比如中文字体兼容性比较头疼，有什么推荐的写法吗？
页:
[1]