HTML中字体控制完全依赖CSS,font标签已废弃;应使用font-family、font-size等CSS属性,配合引号包裹含空格中文字体名、合理字体栈及font-display:swap等策略确保兼容与性能。

HTML 本身不直接控制字体样式,font 标签早已被废弃,真正生效的是 CSS 的 font-family、font-size 等属性。用错方式不仅无效,还可能被浏览器忽略或触发兼容性问题。
用 style 属性内联设置字体最简单
适合单个元素快速调整,无需额外 CSS 文件。但注意:只推荐临时调试或极简页面使用,不适合维护。
-
font-family必须是字体族名,优先写具体字体(如"Helvetica Neue"),再加通用备选(如sans-serif) - 中文字体名含空格时必须用英文引号包裹,例如
"Microsoft YaHei"或"PingFang SC" -
font-size推荐用px(固定)、rem(响应式)或em(相对父级),避免用pt或in
这段文字用了无衬线字体
font 标签在现代 HTML 中完全不可用
HTML5 已移除 标签,任何浏览器都不会按预期渲染它。即使写成 中文,Chrome、Firefox、Safari 都会忽略该标签的样式作用,仅保留文本内容。
- 旧项目迁移时务必搜索并替换所有
标签 - 若依赖 jQuery 插件或老旧 CMS 输出了
,需用 CSS 覆盖或 JS 清洗 DOM - W3C 验证器会直接报错:
Element font is obsolete. Use CSS instead.
通过 引入 Google Fonts 等网络字体
想用思源黑体、Noto Serif 等开源字体,不能只靠系统已安装字体,必须显式加载。Google Fonts 是最常用方案,但要注意加载时机和回退机制。
- 在
中插入 - CSS 中写
font-family: 'Noto Sans SC', 'PingFang SC', sans-serif;—— 顺序决定 fallback 行为 -
&display=swap很关键:避免字体加载期间文字空白(FOIT),改用系统字体临时显示(FOUT) - 国内访问 Google Fonts 不稳定,可考虑镜像源(如
https://fonts.loli.net)或下载字体文件自托管
字体加载失败时的降级策略常被忽视
用户没装指定字体、网络中断、CDN 失效都会导致字体加载失败。只写一个字体名等于把显示权交给运气。
- 永远用逗号分隔多个字体名,形成“字体栈”:例如
"SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif - 最后必须是通用字体族(
serif/sans-serif/monospace),否则浏览器可能用默认等宽字体渲染段落 - 用
@font-face自定义字体时,font-display: swap;是必备声明,否则 Chrome 会阻塞文本渲染长达 3 秒 - 可通过
document.fonts.check()检测特定字体是否可用,但兼容性有限(不支持 IE)
字体不是“设了就能用”,它涉及加载、解析、回退、渲染多个环节。最易出问题的是中文字体名未加引号、网络字体没配 swap、以及盲目信任用户系统里有“微软雅黑”。实际部署前,务必在无缓存模式下测试不同网络条件和设备。











