应使用 css 而非废弃的 标签控制 label 样式，推荐类选择器、属性选择器或内联 style（仅调试），注意 font-size 用 rem/em、color 用十六进制并确保对比度≥4.5:1。
直接用 CSS 控制 label 标签的字体大小和颜色，不要碰 <font></font> 标签——它早在 HTML 4.01 就被废弃，现代浏览器虽可能渲染，但不符合标准，且无法通过 W3C 验证。
为什么不能用 <font></font> 套 label
虽然语法上 <font><label>文本</label></font> 可能“看起来有效”，但这是错误嵌套：label 是行内语义标签，font 是已淘汰的呈现标签，二者混合会破坏可访问性（如屏幕阅读器可能忽略样式包裹），也干扰 CSS 层叠逻辑。更关键的是，font 的 size、color、face 属性在 HTML5 中完全无效。
label 的字体样式必须靠 CSS 设置
CSS 是唯一可靠、可维护、符合标准的方式。有三种常用写法，按推荐顺序排列：
- 用类选择器统一控制：给
label加class="form-label"，再在<style></style>或外部 CSS 中写.form-label { font-size: 14px; color: #333; } - 用属性选择器精准匹配：比如只改带
for属性的label——label[for] { font-size: 1rem; color: #2c3e50; } - 内联
style快速调试：仅限临时验证，如<label style="font-size: 16px; color: #e74c3c;" for="email">邮箱</label>；上线前务必抽离到 CSS 文件
font-size 和 color 的常见取值陷阱
这两个属性看着简单，实际容易踩坑：
-
font-size别硬写px：移动端适配差；优先用rem（相对于根元素）或em（相对于父元素），例如font-size: 0.875rem（对应 14px，假设根字号为 16px） -
color别只依赖颜色名：像red、blue显示效果不一致；用十六进制（#3498db）、RGB（rgb(52, 152, 219)）或 HSL 更可控 - 别漏掉可访问性对比度：WCAG 要求普通文本与背景对比度 ≥ 4.5:1；深灰（
#333）配白底安全，浅灰（#999）配白底就通不过 - 继承问题：如果
label在div里，而该div设了font-size: 12px，那label的em值会基于 12px 计算，不是你预期的 16px
最常被忽略的一点：label 的样式修改不会影响其关联的表单控件（如 input），但会影响点击热区——字体变大后，label 文本区域变宽，用户点击文字任意位置都能聚焦 input，这是提升可用性的隐藏收益。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
