内联样式（style属性）最直接但不宜滥用，应优先用CSS类名+语义化命名+CSS变量统一管理字体，兼顾兼容性、可维护性与多端适配。
用 style 写内联样式最直接，但别滥用
改字体样式最没歧义的方式，就是给元素加 style 属性。比如 <p style="font-family: 'Helvetica Neue', sans-serif; font-size: 16px; color: #333;">。它优先级高、即时生效，适合临时调试或单页小改动。
但问题也明显：样式和结构混在一起，改十个地方就得写十次；换主题时几乎没法批量调整；还容易漏掉响应式适配。
- 别在
style里写!important，除非你清楚后续所有 CSS 的层叠顺序 -
font-family值要按“首选字体→备选字体→通用族”写全，比如'PingFang SC', 'Hiragino Sans GB', sans-serif - 像素单位（
px）在移动端不灵活，小屏上文字可能太小，优先考虑rem或em
CSS 类名控制字体比行内样式更可持续
把字体规则抽成类，比如 .text-sm、.font-serif，再在 HTML 里用 class="text-sm font-serif" 组合使用。这样改一处 CSS 就能影响所有同类文本，也方便复用和测试。
常见陷阱是类名起得太“描述性”，比如 .red-14px-bold —— 一旦设计稿改成深蓝、字号调到 15px，这个类名就失效甚至误导人。
立即学习“前端免费学习笔记（深入）”；
- 推荐语义化命名：
.headline、.caption、.body-copy - 字体粗细别只靠
font-weight: bold，Web 字体往往有多个字重文件（如 300/400/500/700），直接写数字更可控 - 中文字体加载慢，可加
font-display: swap防止文字闪白或长时间空白
全局字体设置用 :root 或 body 最稳妥
想统一整站默认字体，别只改 body，还要考虑表单控件（input、textarea）、代码块（pre）、按钮等元素的继承行为。现代做法是在 :root 定义 CSS 变量，再让各组件引用。
例如：
:root {
--font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'SFMono-Regular', 'Consolas', monospace;
}然后在 body 或 html 上设 font-family: var(--font-main)。
-
button、input默认不继承body字体，必须显式声明 - Firefox 对
font-feature-settings支持更严格，开启连字或替代字形前先查兼容性 - 系统字体栈里别漏掉
BlinkMacSystemFont（Chrome/macOS）和Segoe UI（Win10+）
字体加载失败时 fallback 要真实可用
很多人写 font-family: "Custom Font", sans-serif，以为 sans-serif 就万事大吉。实际上不同系统默认的 sans-serif 差异很大：macOS 是 San Francisco，Windows 是 Segoe UI，Linux 常是 DejaVu Sans —— 字号、字宽、行高都可能突变。
真正可靠的 fallback 是列出具体系统字体，并以通用族收尾。而且得测试：断网、禁用字体、旧浏览器下是否还能读。
- 中文务必包含至少一个本地字体，比如
"Noto Sans CJK SC", "Microsoft YaHei", sans-serif - 避免用
monospace当正文 fallback，它的字符宽度固定，段落会难读 - 如果用了 Web Font，记得监听
document.fonts.load()失败后降级显示
字体这事看着简单，但跨设备、跨浏览器、跨加载状态的表现差异极大。最容易被忽略的是表单控件和 SVG 文本的字体继承，它们常常静默地用回浏览器默认值，而不是你写的那套 CSS。
