HTML的font标签color和face属性废弃后怎么在现代网页中实现全局字体统一设置-html教程-PHP中文网

全局字体必须用css设置，body需联合button、input等元素统一声明font-family，并按平台分层兜底中文字体，末尾加sans-serif，line-height和font-size须显式设定，优先级需检查覆盖情况。

html的font标签color和face属性废弃后怎么在现代网页中实现全局字体统一设置

全局字体设置必须写在 CSS 里，不能靠 `font` 或 `basefont`

浏览器早就无视 <font></font> 和 <basefont> 标签了——不是报错，是直接跳过，连控制台提示都没有。你写了 <font face="PingFang SC" color="#333"></font>，页面照样用 UA 默认字体渲染，毫无反应。所有现代项目都必须用 CSS 控制字体，这是硬性前提。

`body` 上设 `font-family` 不够，还得覆盖 `button`、`input` 等元素

只写 body { font-family: "Segoe UI", sans-serif; }，看起来大部分文字变了，但点开一个 <button></button> 或输入框，字体很可能还是系统默认的（比如 macOS 的 -apple-system，或 Windows 的 Segoe UI 但中文 fallback 失败）。原因在于这些元素有 UA 样式强制声明，会覆盖 body 继承。

实际要这样写：

body,
button, input, select, textarea,
th, td {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

中文字体名必须用英文引号包裹，例如 "PingFang SC"，否则含空格时解析失败
末尾必须带通用族名 sans-serif，否则 iOS Safari 可能回退到 Times New Roman
line-height 必须显式设，否则 button 等元素行高不可控，容易出现文字贴边或上下偏移

字体栈顺序决定跨平台一致性，别混搭中英专有字体

常见错误是把 "Noto Sans SC" 和 Arial 写一起：前者 Windows 默认不预装，后者不支持中文，结果 macOS 上西文用 Arial，中文 fallback 到难看宋体，一行字两种风格。

正确做法是按平台分层兜底：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

优先用系统级字体：如 -apple-system（macOS/iOS）、BlinkMacSystemFont（Chrome on macOS）
再列各平台主流中文字体："PingFang SC"、"Hiragino Sans GB"、"Microsoft YaHei"
最后补通用族：sans-serif，不写 serif 或留空

别指望靠 @font-face 加载中文字体做全局替换——首屏阻塞、FOIT 明显，除非品牌强依赖且已做子集化和 font-display: swap 优化。

`font-size` 用 `px` 还是 `rem`？得看是否响应系统缩放

如果项目要适配系统级“更大字体”或无障碍设置（如 iOS「更大字体」、Windows「显示缩放」），rem 是唯一可靠选择；否则 px 更稳、更可预期。

用 rem 时注意两点：

必须先重置 html 根元素字号，例如 html { font-size: 100%; } 或明确写 html { font-size: 16px; }，否则 Chrome/Firefox 默认值不一致
button、input 等元素也要同步设 font-size: 1rem，它们不会自动继承 body 的 rem 值

最容易被忽略的是 CSS 优先级：哪怕你写了 body { font-family: ... }，只要某个组件库的样式表在后面加载，且用了更具体的选择器（比如 div p）或 !important，你的设置就会被划掉。打开 DevTools，选中任意段落，在 Styles 面板里看哪条 font-family 被划掉，就知道谁赢了。