code 标签的 color 和 font-size 经常不生效，主因是被浏览器默认样式或 CSS 框架（如 Bootstrap、Tailwind）的高优先级规则覆盖；应统一在 CSS 中重置，用 em/rem 单位并同步设置 font-family 和 line-height 以确保跨平台一致性。
code 标签的 color 和 font-size 为什么经常不生效
直接写 style="color: #d32f2f; font-size: 14px;" 却发现颜色变浅、字号没反应，大概率是被浏览器默认样式或第三方库覆盖了。Chrome 对 code 的默认 font-size 是 smaller，Firefox 是 1em，而 Bootstrap、Tailwind 等 CSS 框架通常自带更高优先级的 code 规则。DevTools「Computed」面板里若看到 color 或 font-size 来自 user agent stylesheet 或某个 css 文件，就说明你的内联样式没赢过它们。
全局统一设置 code 的 color 和 font-size 的正确写法
别只靠内联 style——它难维护、易遗漏、无法覆盖预设规则。推荐在 CSS 中统一重置：
- 用
code { color: #d32f2f; font-size: 0.95em; }替代固定像素值，避免在响应式布局中失配 -
font-size推荐用em或rem，比如0.95em能自然继承父元素字号，比14px更健壮 - 如果要高亮关键代码片段（如错误行），可额外定义类：
.error-code { color: #c62828; background-color: #ffebee; }，再配合 HTML 使用<code class="error-code">TypeError</code> - 注意：某些 Markdown 渲染器会把行内代码包进
<pre><code></code></pre>，此时需单独写pre code { ... }才能生效
内联 style 设置 code 颜色和大小时的常见错误
真要用 style 属性临时调试或小范围调整，必须避开这几个坑：
- 写成
<code style="color:red;font-size:12px">foo</code>是合法的，但<code style="color:red" style="font-size:12px">会失败——HTML 不允许多个style属性 - 颜色值别用中文名（如“红色”），只支持英文名（
red）、十六进制（#f44336）、RGB（rgb(244, 67, 54)） -
font-size后单位不能省：写12无效，必须是12px、0.75em或75% - 若嵌在段落中（如
<p>调用 <code style="...">fetch()</code> 方法</p>），记得加line-height: 1.4防止上下文字基线错位
为什么改了 color 和 font-size 还看起来“不对劲”
字体渲染不一致的根因往往不在颜色或大小本身，而在 font-family 和 line-height 没同步处理。比如 Mac 上 SFMono-Regular 字宽紧凑，Windows 上 Courier New 字宽松散，同样 font-size: 14px 在两台机器上视觉密度差异明显；而 line-height 缺失会导致 code 垂直位置漂移，让颜色高亮显得“浮”在文本流之外。真正稳定的方案是三者一起设：code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.95em; line-height: 1.4; color: #1a237e; }。
立即学习“前端免费学习笔记（深入）”；
