适合<code>标签的字体需满足等宽、区分0/O与1/l/I、小字号清晰三条件；推荐Fira Code、JetBrains Mono、Cascadia Code、Source Code Pro，并配以font-variant-ligatures: no-common-ligatures等最小安全CSS。
直接用等宽字体，别考虑非等宽的——<code> 标签语义就是展示代码片段，必须保证字符对齐、缩进可靠、符号可辨。否则 if (x == 0) 和 if(x==0) 在视觉上就失去结构差异，调试时容易误判。
哪些字体真正适配 <code> 标签的语义需求
不是所有“看着像代码”的字体都适合嵌入 HTML 的 <code>。关键看三点：是否等宽、是否区分 0/O 和 1/l/I、是否在小字号（如 12px–14px）下仍清晰。以下几款经实测满足全部条件，且免费可商用：
-
Fira Code：连字支持完整（!=→≠，=>→⇒），但需 CSS 显式启用font-variant-ligatures: discretionary-ligatures；默认不开启连字时，它仍是极稳的等宽字体 -
JetBrains Mono：零带斜线（0̸）、l有底钩、I两端平直，小字号下抗锯齿表现优于多数开源字体 -
Cascadia Code：微软出品，专为终端和<code>场景优化，@font-face加载后在 Chrome/Firefox/Edge 中渲染一致性高，且自带 Powerline 符号支持 -
Source Code Pro：Adobe 开源，无连字干扰，字符间距宽松，适合文档内嵌代码块（如 Markdown 渲染后的<code>）
@font-face 引入时容易忽略的兼容性坑
很多开发者把字体文件丢进 fonts/ 目录、写好 @font-face 就以为完事，结果在 Safari 或旧版 Edge 里字体不加载、回退成 Courier New。根本原因常是以下几点：
- 只提供
.ttf格式：Safari 15.4+ 要求.woff2或.woff才能启用可变字体特性；建议至少打包.woff2+.woff双格式 - 未声明
font-display: swap：会导致文本闪动或长时间空白；强制加这一行，确保文字先用系统字体渲染，字体加载完成再替换 - 中文混排时未设回退链：比如页面含中文注释，只写
font-family: "Fira Code", monospace，遇到中文会 fallback 到系统默认中文字体（可能偏细或字重不匹配）；应补全如"Fira Code", "Microsoft YaHei UI", "PingFang SC", monospace
前端项目中 <code> 的最小安全 CSS 配置
光选对字体不够，样式没配好，一样白搭。下面这段是经过多端验证的最小可用配置，可直接复制进 base.css 或全局样式：
立即学习“前端免费学习笔记（深入）”；
code {
font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", "Consolas", "Courier New", monospace;
font-size: 0.95em;
line-height: 1.5;
font-variant-ligatures: no-common-ligatures; /* 关键：禁用影响可读性的连字，如 f+i */
background-color: #f8f8f8;
padding: 0.2em 0.4em;
border-radius: 3px;
color: #2a2a2a;
}注意：font-variant-ligatures: no-common-ligatures 是重点——它关掉易混淆的连字（比如 fi、fl），但保留编程连字（如 =>）需额外开启 discretionary-ligatures，二者不冲突。
最后提醒一句：别在 <code> 里强行用非等宽字体撑宽度，也别依赖浏览器默认的 Courier New 做最终回退——它在 macOS 上渲染发虚，在 Linux 终端里缺字严重。真要省事，就选 JetBrains Mono 或 Cascadia Code，下载、转格式、加 @font-face、套上面那段 CSS，十分钟搞定，之后十年不用调。
