Svelte 不导入字体

Question

我将字体存储在

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');
}

结果：

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

，通过

<style>

中的

+layout.svelte

添加它们，将网址从

fonts/SpaceMono-Regular.tts

更改为

static/fonts/SpaceMono-Regular.tts

，但我仍然遇到相同的错误

Answer 1

Vite 可能无法处理这样的 URL。
使用相对路径（

./

和

../

）或使用

$lib

别名（指向

src/lib

目录）。

例如

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

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