如何在StackBlitz静态HTML项目中添加自定义TTF字体？配置后无效

• 先修正文件名：你实际放入的字体文件是mercury_font.ttf，但CSS配置里写的是Mercury_Bold.ttf，文件名（包括大小写）完全不匹配，这是最直接的问题，把@font-face里的路径文件名改成和实际一致的mercury_font.ttf。
• 核对路径层级：确认fonts文件夹和当前CSS文件的位置关系——如果CSS文件在子文件夹（比如/css/style.css），那路径要写成../fonts/mercury_font.ttf，保证相对路径能正确指向字体文件夹。
• 检查文件加载状态：按F12打开开发者工具，切换到Network面板，勾选「禁用缓存」后刷新页面，查看字体文件的加载状态。如果显示404，说明路径或文件名仍有错误。
• 排查字体文件本身：换个已知可用的字体文件放到fonts文件夹中，替换CSS里的文件名测试，排除原字体文件损坏的可能。
• （可选）补充兼容字体格式：TTF格式虽能被多数浏览器识别，但可以额外添加WOFF/WOFF2格式的字体，进一步提升兼容性，不过优先解决前面的基础问题。

内容的提问来源于stack exchange，提问作者7_Baira Praveen