浏览器对标签默认字体小是因语义优先设计，解决方法是用rem/em单位覆盖font-size并优化等宽字体，同时需处理pre嵌套、响应式及深色模式等场景。

为什么

标签默认字体太小

浏览器对 <code> 标签的默认样式是 <code>font-family: monospace + font-size: 1em，但它的父元素（比如 <p></p> 或 ）往往本身字体就偏小，再加上等宽字体在相同像素下视觉上更“细密”，导致阅读吃力。这不是 bug，是历史遗留的语义优先设计——它只保证“这是代码”，不保证“这要好读”。

给

标签单独放大字体的可靠写法

最直接有效的方式是用 CSS 覆盖其 font-size，并搭配等宽字体优化可读性：

• 在 的 <style></style> 中或外部 CSS 文件里加：

  code {
    font-size: 0.95rem;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  }

• 若需适配正文缩放（比如用户调大系统字体），优先用 rem 或 em，避免死写 px
• 不要只改 code，顺手也设 pre code，否则多行代码块里的内联 <code> 可能被忽略

配合

使用时字体变小的常见陷阱

很多人把 <code> 套在 <pre class="brush:php;toolbar:false;"></pre> 里，结果发现文字比预期还小——这是因为部分浏览器（如旧版 Safari）会给 <pre class="brush:php;toolbar:false;"></pre> 设一个较小的默认 font-size（比如 13px），而 code { font-size: 1em } 就继承了这个小值。

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

• 解决方法：显式重置 pre 的基础字号，例如 pre { font-size: 1rem; }
• 更稳妥的做法是直接写 pre code { font-size: 1rem; }，跳过继承链
• 如果用了 vw 或 clamp() 做响应式字号，注意 pre code 也要同步覆盖，否则移动端可能缩得看不见

需要全局统一调整时的关键点

当项目中大量使用 <code>（如文档站、技术博客），靠单个选择器容易漏掉场景，建议从根上控制：

• 在 html 或 body 上设基准字号（如 font-size: 100% 或 16px），确保 rem 计算有据可依
• 用 :where(code) 或 :is(code, kbd, samp) 一次性覆盖所有文本类等宽元素，避免遗漏
• 别忘了检查深色模式下是否因对比度不足加剧了“看不清”——可加 color: var(--code-fg, #e06c75); 配合 CSS 变量

真正难的不是把字调大，而是让放大后的 <code> 在各种嵌套上下文、不同设备、开启系统字体缩放时都保持一致可读。盯住继承链和单位选择，比盲目加 !important 管用得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！