CSS字体继承错乱主因是规则误读或覆盖：h1/h2/h3需用逗号选择器而非空格；表单控件不自动继承font-family，须显式设inherit；::first-letter放大后需line-height:1+vertical-align修复行高偏移；DevTools中查Computed值来源最可靠。
字体样式错乱，十有八九不是字体没加载，而是继承规则被误读或覆盖了——color、font-family、font-size 确实会继承，但浏览器默认样式、选择器权重、伪元素干扰、特殊标签（如 textarea）不主动继承，都会让“本该一致”的文字看起来东倒西歪。
为什么 h1/h2/h3 没用 body 的 font-family？
常见错误是写成 h1 h2 h3（空格分隔），这其实是后代选择器，不是“选所有标题”。它只匹配嵌套在 h1 里的 h2、再里面的 h3，几乎永远不命中。
- 正确写法必须用逗号：
h1, h2, h3，表示“任一匹配即应用” - 更稳妥的做法是统一重置：在
body或:root中设font-family，再对标题显式覆盖字号/字重，避免依赖继承 - 检查开发者工具的 Computed 面板，看
font-family值来源是user agent stylesheet还是你的 CSS —— 浏览器默认会给h1加粗+放大，优先级可能高于你没加权重的规则
为什么 input/textarea 字体和正文不一致？
这些表单控件在多数浏览器中**不自动继承 font-family 和 line-height**，尤其 Firefox 和旧版 Safari 会固执地用系统等宽字体（monospace）。
- 必须显式声明：
input, textarea, select, button { font-family: inherit; font-size: 100%; line-height: 1.5; } - 注意
font-size: 100%比inherit更可靠 —— 某些浏览器对font-size: inherit在表单元素上解析异常 -
textarea还要额外加box-sizing: border-box，否则 padding 和 border 会撑出预期宽度，视觉上像“字体被挤小了”
为什么 ::first-letter 放大后整行位置飘了？
::first-letter 是 inline 伪元素，它继承父级 line-height，但放大首字母后，浏览器按替换元素重新计算基线，导致整行上浮或下沉。
- 关键不是禁用继承，而是接管控制：给伪元素加
line-height: 1（无单位） +vertical-align: text-top - 避免用
em或rem设font-size，改用px或直接倍数（如2.5x）更稳定 - 慎用
display: block—— 它会让首字母脱离行内流，破坏text-indent缩进，且在部分字体下引发字形下沉
真正难缠的不是“怎么写”，而是“哪一层在起效”。继承链里任何一个环节被 !important、用户代理样式、Shadow DOM 或 all: unset 截断，都会让字体突然“失联”。动手前先开 DevTools，逐层点开 Computed 样式，盯住 font-family 和 font-size 的 actual value 和 source，比猜半天有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
