SvelteKit字体导入失败求助：静态字体文件404错误

问题描述 #

字体文件存储在static/fonts目录下，index.css配置如下：

@font-face {
  font-family: 'SpaceMono Regular';
  src: url('fonts/SpaceMono-Regular.tts');
}

@font-face {
  font-family: 'SpaceMono Bold';
  src: url('fonts/SpaceMono-Bold.tts');
}

运行后出现404错误：

SvelteKitError: Not found: /fonts/SpaceMono-Regular.tts
    at resolve (/home/qwerty/prjcts/test/node_modules/@sveltejs/kit/src/runtime/server/respond.js:530:13)
    at resolve (/home/qwerty/prjcts/test/node_modules/@sveltejs/kit/src/runtime/server/respond.js:330:5)
    at #options.hooks.handle (/home/qwerty/prjcts/test/node_modules/@sveltejs/kit/src/runtime/server/index.js:71:56)
    at Module.respond (/home/qwerty/prjcts/test/node_modules/@sveltejs/kit/src/runtime/server/respond.js:327:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  status: 404,
  text: 'Not Found'
}
SvelteKitError: Not found: /fonts/SpaceMono-Bold.tts
    at resolve (/home/qwerty/prjcts/test/node_modules/@sveltejs/kit/src/runtime/server/respond.js:530:13)
    at resolve (/home/qwerty/prjcts/test/node_modules/@sveltejs/kit/src/runtime/server/respond.js:330:5)
    at #options.hooks.handle (/home/qwerty/prjcts/test/node_modules/@sveltejs/kit/src/runtime/server/index.js:71:56)
    at Module.respond (/home/qwerty/prjcts/test/node_modules/@sveltejs/kit/src/runtime/server/respond.js:327:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  status: 404,
  text: 'Not Found'
}

尝试过将字体移至src、src/lib目录，在+layout.svelte中通过<style>引入，修改url为static/fonts/SpaceMono-Regular.tts等方法，仍出现相同错误。

核心问题分析 #

1. SvelteKit的static目录资源会部署到网站根目录，static/fonts对应访问路径为/fonts/，但CSS中url()路径是相对CSS文件本身的位置，若CSS不在根目录，相对路径会失效。
2. 字体文件后缀大概率写错：应为.ttf而非.tts，这是常见的404诱因。

解决步骤 #

1. 修正字体文件后缀
   检查字体实际后缀，将CSS中的.tts改为.ttf（TrueType字体标准后缀），确保文件名与后缀完全匹配。

2. 使用绝对路径引用字体
   改用根路径开头的绝对URL，确保无论CSS文件位置如何，都能正确指向字体：

   @font-face {
     font-family: 'SpaceMono Regular';
     src: url('/fonts/SpaceMono-Regular.ttf');
   }
   
   @font-face {
     font-family: 'SpaceMono Bold';
     src: url('/fonts/SpaceMono-Bold.ttf');
   }
   

3. 确认字体文件位置
   保证字体文件存放在项目根目录的static/fonts下，目录结构如下：

   your-project/
   ├── static/
   │   └── fonts/
   │       ├── SpaceMono-Regular.ttf
   │       └── SpaceMono-Bold.ttf
   └── src/
       └── ...
   

4. 正确引入CSS文件
   在+layout.svelte中按实际路径引入CSS：

   <script>
     import '../index.css'; // 根据CSS实际位置调整路径
   </script>
   

5. 清除缓存重启服务
   关闭开发服务器，删除.svelte-kit目录后重新启动，避免缓存导致资源不更新：

   rm -rf .svelte-kit
   npm run dev
   

内容的提问来源于stack exchange，提问作者Kristiano Odadu