标签在HTML5中已被废弃，必须用CSS的color、font-size、font-family等属性替代；它不支持响应式、暗色模式、无障碍及现代样式能力，且会导致CI/CD或Lighthouse检查失败。
直接用 CSS 的 color、font-size、font-family 三个属性就能控制字体颜色、大小和字体，别碰 <font></font> 标签——它在 HTML5 中已废弃，浏览器可能渲染但会报错，CI/CD 或 Lighthouse 检查直接不通过。
内联 style 改单个元素字体最简单，但有优先级陷阱
适合临时调试或静态页快速验证，写法是：<p style="color: #d32f2f; font-size: 1.2rem; font-family: 'Segoe UI', sans-serif;">警告文本</p>
-
color支持颜色名（red）、十六进制（#333）、rgb(51, 51, 51)、hsl(0, 0%, 20%)；别加引号，color: "red"会失效 -
font-size推荐用rem（相对于根字号）或em（相对于父字号），比px更适配响应式；但设计稿标注明确时，16px也完全可用 - 常见翻车：写成
font-size: 1.2 rem（中间多空格），整条声明被浏览器忽略，在开发者工具里显示为划掉的灰色 - 内联样式优先级最高，一旦写了
style="color: red"，后面用类名想覆盖就得加!important——这会让后续维护变困难，尤其多人协作时
用 class + 内部 style 统一控制页面内字体样式
把规则写在 的 <style></style> 块里，例如：
<style>
body { color: #222; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
h2 { font-size: 1.5rem; color: #1a5fb4; }
.text-error { color: #d32f2f; font-weight: 600; }
</style>
- 类选择器（如
.text-error）优先级高于标签选择器（如p），但低于内联style - 如果项目用了 Bootstrap 或 Tailwind，它们的
body或p可能已有默认color，你的规则得写得更具体（比如body p或加新类名）才能生效 - 别滥用
!important：它会破坏层叠逻辑，导致后续改色时找不到生效源头
CSS 变量适合主题切换，但 currentColor 不是“自动暗色模式”
想换主色调时全局联动，用 :root 定义变量：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
<style>
:root { --text-primary: #3498db; }
p { color: var(--text-primary); }
.icon { fill: currentColor; }
</style>
-
currentColor是当前元素color属性的值，不是动态感知系统主题的变量 - 它常用于 SVG 图标填充或边框颜色同步文字色，比如
border: 1px solid currentColor - 要支持暗色模式，得手动配合
@media (prefers-color-scheme: dark)重设--text-primary，currentColor自己不会变 - 老版本 Safari 在伪元素（如
::before）中读取currentColor可能异常，需实测
为什么不能用 标签？不只是“过时”那么简单
<font color="#ff0000" size="4">红色大字</font> 看似能跑，但实际问题很多：
- HTML5 规范已移除该标签，W3C 验证器直接报错，部分构建工具（如 Webpack + html-webpack-plugin）会警告甚至中断
- 它无法设置相对单位（
rem、em）、透明度（rgba）、HSL 色彩空间，也不支持媒体查询响应式调整 - 嵌套使用（如
<font><font>文本</font></font>）易引发结构混乱，且现代编辑器语法高亮和 Emmet 补全都不支持 - 团队协作中，别人看到
<font></font>会默认你没掌握基础 CSS，PR 很可能被要求重写
真正麻烦的不是“写不出来”，而是写出来之后，没人敢动、不敢删、不敢改——尤其当它混在 JS 模板字符串或 Vue/React 的 JSX 里时，排查成本远高于一开始用 class 控制。
