用style内联样式快速改字体是最高效的方法，需注意备选字体、引号规范及避免使用已废弃的font标签。
用 style 内联样式快速改字体，别再套 class
直接在标签里加 style 是最快改字体的方法，尤其适合临时调整、邮件模板、CMS 可视化编辑器里粘贴内容等场景。不用写 CSS 文件，也不用查 class 名是否冲突。
常见错误是只写 font-family 却忽略备选字体和引号问题：Windows 和 macOS 默认字体不同，中文必须 fallback 到 "Microsoft YaHei"、"PingFang SC" 或 "sans-serif"；英文单词字体名含空格时（如 Times New Roman）必须加引号。
正文
标题
- 避免写成
font-family: Helvetica Neue（缺引号会断在 Neue）
font 标签已废弃，千万别用
在 HTML5 中完全无效，现代浏览器虽可能渲染，但 W3C 已移除支持，VS Code 和 Chrome DevTools 都会标为过时。用它会导致语义丢失、无法响应式缩放、无障碍阅读器识别失败。
真实踩坑场景：从老旧 CMS 导出的 HTML、某些 Excel「另存为网页」生成的内容、外包交付的静态页里还藏着 。遇到就立刻替换成 style 内联或外部 CSS。
立即学习“前端免费学习笔记（深入）”；
- 搜索替换正则：
]*face=["']([^"']+)["'][^>]*>→ 改为style="font-family: '$1';" - 注意
同样失效，应换为style="color: red;"
批量改字体？用浏览器控制台一行 document.querySelectorAll 搞定
页面已有大量段落或标题需要统一换字体，又不想逐个改源码，打开 DevTools 控制台粘贴即可生效（刷新后消失，安全）：
document.querySelectorAll('p, h1, h2, h3').forEach(el => el.style.fontFamily = "'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif");
这比手动改几十个 style 快得多，也比临时加 标签更轻量。注意选择器要精确——比如只改文章主体内的 p，可写 #article-content p，避免误改导航栏或页脚。
- 执行前先
console.log(document.querySelectorAll('p').length)看数量是否合理 - 如果字体名含单引号（如
'Noto Sans CJK SC'），整个字符串得用双引号包裹 - 该操作不修改 HTML 源码，仅影响当前页面 DOM，适合测试效果
隐藏招：用 data-font 属性配合 JS 实现字体热切换
所谓“隐藏招”，其实是把字体配置从硬编码移到自定义属性里，便于后续维护或用户偏好切换。不是炫技，是真省时间——下次换字体不用翻代码，只改几个 data-font 值再跑一遍 JS。
例如给容器打标： 这个模式在内部工具页、文档站点、多语言内容页中特别实用。关键点在于：数据驱动样式，而不是把字体名散落在各处 const fontMap = {
default: "'Segoe UI', 'Microsoft YaHei', sans-serif",
readable: "'Noto Serif CJK SC', serif",
compact: "'Roboto', sans-serif"
};
document.getElementById('content').style.fontFamily = fontMap[document.getElementById('content').dataset.font];
style 里。
实际改字体最耗时间的从来不是写法，而是确认设计规范、测试多端显示、处理 fallback 失败。内联 dataset 只读取小写连字符格式，data-font-name 对应 dataset.fontName
serif 字体在 iOS 上渲染偏细，慎用于正文style 省的是编码时间，但别让它成为逃避系统化样式管理的借口。
