在HTML5网页开发中，控制文字显示外观最核心的CSS属性就是 font-family。它决定了浏览器用哪一种字体来绘制文本。理解它的匹配逻辑和通用字体族的作用，是写出稳定跨平台排版的基础。
font-family 的基本写法与优先级
font-family 属性接受一个由逗号分隔的字体名称列表。浏览器在渲染时会从左到右依次检查，使用第一个在用户设备上可用的字体。如果列出的所有具体字体都找不到，就会使用列表最后指定的通用字体族，由操作系统自行决定最终显示效果。
这意味着顺序非常关键。把希望优先使用的字体放在最前面，将兼容性兜底用的通用字体放在末尾，是标准做法。例如下面这段CSS，优先使用微软雅黑，如果系统没有就退而求其次用黑体，再没有就用无衬线通用字体：
body {
font-family: "Microsoft YaHei", "Heiti SC", sans-serif;
}
需要注意的是，字体名称如果包含空格或中文，必须用双引号或单引号包裹。未加引号的带空格字体名会被浏览器误解析为多个独立值，从而造成样式失效。此外，不同操作系统预装字体差异很大，Windows 常见微软雅黑，macOS 常见苹方，Linux 常常只有文泉驿之类，因此靠后的 fallback 设计才显得重要。
通用字体族的分类与选择
CSS 规范定义了若干通用字体族，它们不对应某个具体字体文件，而是表达一类视觉风格。最常见的包括 serif（衬线体）、sans-serif（无衬线体）、monospace（等宽体）、cursive（手写体）和 fantasy（艺术体）。在 font-family 列表末尾写上它们，可以保证即使前面具体字体全失效，文字也至少以合理风格呈现。
以中文网页为例，正文通常选 sans-serif 获得清晰易读的无衬线效果，而代码块则常用 monospace 保证字符对齐。下面的例子展示了如何为不同语义区块设置不同通用族：
p {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
code {
font-family: "SFMono-Regular", Consolas, monospace;
}
通用字体族的另一个价值是减少布局跳跃。当网络字体尚未加载完成时，浏览器可先以本地通用族渲染，避免出现不可见文本。配合 font-display 属性使用，能进一步优化体验。但也要注意，不同系统对同一个通用族的解释不同，macOS 的 sans-serif 可能偏细，Windows 可能偏粗，因此重要项目仍建议自带 web font。
HTML5 中设置字体的常见方式
在HTML5文档里，字体设置主要通过外部或内部CSS完成，而不是像早期HTML那样用已废弃的 face 属性。推荐将样式写在 <style> 标签或独立样式表中，保持结构与表现分离。
下面给出一个完整HTML片段，演示如何通过CSS类控制不同文字块的字体优先级：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体示例</title>
<style>
.title {
font-family: "Microsoft YaHei", "Heiti SC", sans-serif;
}
.article {
font-family: "Songti SC", "SimSun", serif;
}
</style>
</head>
<body>
<h1 class="title">无衬线标题</h1>
<p class="article">这是衬线体正文示例，优先使用宋体类字体。</p>
</body>
</html>
从代码可以看出，我们并未在HTML标签上直接写字体，而是通过 class 挂钩CSS规则。这样做便于整站统一调整。若将来想换品牌字体，只需修改CSS列表第一项，无需改动HTML结构。同时，serif 放在最后确保即使宋体类缺失，文章仍以衬线风格显示，不会变成默认丑陋字体。
优先级冲突与调试建议
当多个CSS规则都设置了 font-family 时，优先级遵循常规层叠规则：行内样式高于内部样式，内部高于外部，同权重下后写覆盖前写。如果发现自己写的字体不生效，先检查是否被更具体的选择器覆盖，或用浏览器开发者工具查看 computed 面板里的渲染字体名。
一个易错点是使用简写属性 font 时无意中重置了 family。比如 font: 16px; 这种写法虽不合法，但 font: bold 16px/1.5; 会将其余字体相关属性设回初始值，从而丢掉之前设定的 font-family。稳妥方式是分开声明：
.element {
font-size: 16px;
font-weight: bold;
line-height: 1.5;
font-family: "Microsoft YaHei", sans-serif;
}
此外，引入网络字体（如 @font-face）时，若字体文件加载慢，可依靠通用字体族先行占位。这样用户第一时间看到文字，字体就绪后再无感切换。整体而言，把具体字体放前、通用族放后，并规范引号与顺序，就能在HTML5项目中搞定绝大多数文字字体设置问题。
HTML5font_family通用字体修改时间：2026-08-05 00:57:32