使用CSS @font-face时Roboto Mono字体失效，Quicksand正常

数据老陈

2026-7-9

问题排查方案：Roboto Mono字体无法生效

结合你给出的代码和问题描述，以下是几个大概率的排查方向：

检查字体文件名与路径是否匹配
你在@font-face里给Roboto Mono写的路径是fonts/Roboto.ttf，但这款字体的标准文件名一般是RobotoMono.ttf或者Roboto-Mono-Regular.ttf这类，很可能是你写错了文件名，导致浏览器找不到字体文件。对比Quicksand的文件名Quicksand.ttf和引用路径完全匹配，你需要确认Roboto Mono的实际文件名是否和代码里的一致，比如是不是把RobotoMono写成了Roboto。同时也要确认字体文件确实放在fonts目录下，如果你的CSS文件在子文件夹里，可能需要用../fonts/xxx.ttf这种相对路径来定位。
验证字体文件是否正常
尝试直接双击打开你的Roboto.ttf文件，看系统能不能正常显示字体的字符。如果文件打不开、显示乱码或者是其他字体，说明这个文件已经损坏或者不是你要的Roboto Mono，需要重新下载正确的字体文件。
补充@font-face的必要属性
有时候缺少font-weight和font-style会导致字体不生效，浏览器默认会匹配normal字重和样式。你可以给Roboto Mono的@font-face补充这两个属性，修正后的代码示例：
```
@font-face {
  font-family: RobotoMono;
  src: url(fonts/RobotoMono.ttf); /* 先修正文件名 */
  font-weight: normal;
  font-style: normal;
}
```
如果你的Roboto Mono有不同字重（比如Bold），也要对应添加不同的@font-face规则，并在使用时指定对应的font-weight。
查看浏览器控制台的资源加载状态
按F12打开浏览器开发者工具，切换到「网络」标签页，刷新页面后搜索你的Roboto Mono字体文件名。如果显示404状态码，那就是路径或文件名的问题；如果加载成功但字体还是不显示，那可能是字体文件本身的问题，或者存在CSS属性冲突（可以在「元素」标签页里检查font-family是否被其他样式覆盖）。