@font-face加载本地自定义字体失败，请求技术协助

阿华AIGC实验室

2026-4-28

排查@font-face无法加载自定义字体的问题

我来帮你一步步找出问题所在，先从最可能的错误开始排查：

1. 外部CSS文件里不要包含`<style>`标签

你提到这段代码是在style.css文件里，但代码里写了<style>和</style>标签——这是错误的！外部CSS文件只需要纯CSS规则，不需要HTML的style标签。把这两个标签删掉，只保留CSS代码，比如：

@font-face {
  src: url(fonts/omori.ttf);
  font-family: 'omo';
  font-weight: normal;
  font-style: normal;
}
body {
  background-image: url(removed for this question due to irrelevance and for privacy);
  color: grey;
  font-family:'omo';
}
h1 {
  text-align: center;
  color: white;
  font-family:'omo';
}

这很可能是导致字体不生效的核心原因，因为浏览器会把style标签当作无效CSS忽略，@font-face规则根本没被解析。

2. 检查字体文件路径是否正确

确认fonts/omori.ttf的路径是否和你的文件结构匹配：

如果style.css在网站根目录，fonts文件夹也在根目录，那路径是对的；
如果style.css在css/子文件夹里，路径应该改成../fonts/omori.ttf（用../回到上一级目录）；
你可以打开浏览器的开发者工具→Network面板，刷新页面，搜索omori.ttf，看它的状态码：如果是404，说明路径错了；如果是200，说明路径没问题。

3. 补全字体格式以提升兼容性

只提供TTF格式可能在部分浏览器（比如旧版IE）里不兼容，建议添加更通用的woff/woff2格式，并明确指定格式类型，同时加上font-display避免页面加载时的字体闪烁：

@font-face {
  font-family: 'omo';
  /* 优先加载体积更小的woff2 */
  src: url('fonts/omori.woff2') format('woff2'),
       url('fonts/omori.woff') format('woff'),
       url('fonts/omori.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 先用系统字体占位，字体加载后替换 */
}

你可以用在线工具把TTF转换成woff/woff2格式，这样兼容性更好。