在CSS样式开发中，设置font-size属性后字体大小没有按照预期变化是很常见的问题，这类问题往往和CSS的渲染规则、属性特性相关，需要从多个维度排查原因。
常见的font-size失效原因及解决方法
1. 样式优先级冲突
如果同一个元素被多个选择器设置了font-size，优先级更高的样式会覆盖优先级低的设置，导致你写的font-size不生效。CSS优先级的计算规则是：内联样式（1000）> ID选择器（100）> 类/伪类/属性选择器（10）> 标签/伪元素选择器（1），通配符优先级为0。
可以通过浏览器开发者工具的Elements面板的Computed选项卡查看最终生效的font-size值，以及对应的样式来源。如果需要让自己的样式生效，可以提升选择器的优先级，或者使用!important声明，不过!important不建议滥用。
示例：提升选择器优先级让font-size生效
/* 原样式，优先级低 */
p {
font-size: 14px;
}
/* 提升优先级后的样式，会覆盖上面的设置 */
.content p {
font-size: 16px;
}
2. 属性继承规则限制
font-size属于可继承属性，但是部分元素本身有默认的font-size设置，不会继承父元素的对应值。比如<input>、<button>、<select>等表单元素，浏览器会给它们设置默认的字体大小，即使父元素设置了font-size，这些元素也不会继承。
解决方法是直接给这些元素单独设置font-size，或者重置它们的默认样式。
示例：给表单元素单独设置font-size
/* 重置表单元素默认字体大小 */
input, button, select {
font-size: 14px;
}
/* 父元素设置font-size，普通文本元素会继承 */
.container {
font-size: 16px;
}
3. 单位使用错误
font-size支持多种单位，不同单位的表现不同，如果单位使用错误也会导致看起来设置不生效。比如使用相对单位em时，它是相对于父元素的font-size计算，如果父元素本身font-size很小，em计算后的值也会很小；使用rem时，是相对于根元素html的font-size，如果根元素没有设置font-size，浏览器默认是16px。
如果不确定单位的使用场景，优先使用px或者rem单位，避免单位计算错误导致字体大小不符合预期。
示例：正确使用rem单位
/* 设置根元素字体大小，1rem = 16px */
html {
font-size: 16px;
}
/* 此时该元素的font-size为32px */
.title {
font-size: 2rem;
}
4. 浏览器默认样式干扰
不同浏览器会给元素设置默认的font-size，比如body元素在大部分浏览器中默认font-size是16px，部分浏览器可能给标题元素h1到h6设置不同的默认字体大小，如果你没有重置这些默认样式，设置的font-size可能会被默认样式覆盖。
常用的解决方法是引入CSS重置样式，或者在样式开头统一重置常见元素的默认font-size。
示例：重置浏览器默认样式
/* 简单重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: normal;
}
5. 元素被设置为不可见或被其他元素遮挡
如果元素设置了display: none，或者visibility: hidden，元素本身不会渲染，自然看不到font-size的效果；如果元素被其他元素完全遮挡，也会误以为font-size没有生效。可以通过开发者工具查看元素是否处于可见状态，以及是否有遮挡情况。
快速排查步骤
遇到font-size不管用时，可以按照以下步骤快速定位问题：
- 打开浏览器开发者工具，选中目标元素，查看Computed选项卡中的font-size值，确认是否有值，以及值的来源
- 检查是否有更高优先级的样式覆盖了当前设置的font-size
- 确认元素是否属于不继承父元素font-size的特殊元素，是否需要单独设置
- 检查font-size的单位是否正确，计算后的值是否符合预期
- 确认是否有浏览器默认样式干扰，是否需要重置样式
- 检查元素是否可见，是否被其他元素遮挡
按照以上步骤排查，基本可以解决大部分css font-size不管用的问题，日常开发中也可以提前做好样式重置，避免默认样式带来的干扰。