code 标签默认 font-weight 为 400（normal），chrome、firefox、safari 均如此；若设为 700 却不加粗，主因是字体缺失该字重或被更高优先级样式覆盖。
code 标签默认 font-weight 是多少
绝大多数浏览器对 code 的默认 font-weight 是 400（即 normal），不是 bold。这意味着即使你写了 <code>console.log()，它也不会自动加粗——除非你或某个 CSS 库显式改过它。
常见误区是以为 code 天然“醒目”，结果在段落中嵌入时和周围文字粗细一致，完全起不到代码标识作用。
- Chrome、Firefox、Safari 默认都走
font-weight: 400 - 部分 UI 框架（如 Bootstrap）会重置为
font-weight: bolder，但行为不可靠（bolder依赖父级值，易降级） - 用 DevTools 查看任意
code元素的 Computed 面板，确认font-weight实际值，别凭感觉
给 code 加粗该用 bold 还是 700
直接写 font-weight: bold 或 font-weight: 700 效果等价，但推荐后者：它更明确、可预测，且与 CSS 变量体系兼容更好。
关键前提是——你用的等宽字体得真有 700 字重。很多系统等宽字体（如 Consolas、Menlo、SFMono-Regular）只提供 400 和 700 两档，中间值（500/600）基本无效。
- 优先检查字体支持情况：打开 DevTools → Fonts 面板 → 看当前
code渲染所用字体的 weight 列表 - 若字体只含 400，则
font-weight: 700会被浏览器静默降级为 400，毫无变化 - Google Fonts 上选等宽字体（如
Fira Code、JetBrains Mono）时，务必带字重参数：&family=Fira+Code:wght@400;700 - 本地
@font-face加载时，每个字重必须单独声明，不能共用一个src
为什么加了 font-weight: 700 还不粗
最常被忽略的原因不是 CSS 写错了，而是字体本身没提供粗体变体，或者被更高优先级样式覆盖了。
- 第三方库（如 Tailwind、Prism.js）可能带
code { font-weight: 400 !important; }，直接压掉你的规则 - Markdown 渲染器生成的是
<pre class="brush:php;toolbar:false;"><code>...</code></pre>，而你只写了code规则，漏掉了pre code - 父容器设了
font-weight: 300，而code没显式声明更高值，某些浏览器不会自动提升 - 用了 icon 字体或精简中文字体（如某些「思源黑体」裁剪版），它们压根没等宽粗体字重
验证方式：选中元素 → Computed → 拉到底看 font-weight 和 font-family 两栏实际生效值，不是 Styles 里你写的那条。
安全又灵活的加粗方案
别只盯着单个 code 元素加粗，要兼顾语义、复用性和 fallback 容错。
- 全局统一定义 CSS 变量：
body { --code-fw: 700; }，再写code { font-weight: var(--code-fw); }，后期调整只需改一处 - 对
<pre class="brush:php;toolbar:false;"><code></code> 块级代码单独强化：<code>pre code { font-weight: 700; line-height: 1.5; }</code>，避免和行内 <code>code</code> 混淆</pre> - 如果字体确实不支持 700，宁可用
filter: brightness(1.1)微调视觉对比度，也别硬塞无效font-weight: 600 - 慎用
!important，优先提高选择器权重，比如用body code或.content code
真正难的不是“怎么写”，而是每次改完都得去 Fonts 面板确认字体文件是否真加载了对应字重——这点几乎没人主动查，却决定了加粗到底有没有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
