Svelte 不导入字体

问题描述 投票:0回答:1

我将字体存储在

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
,但我仍然遇到相同的错误

svelte sveltekit
1个回答
0
投票

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

./
../
)或使用
$lib
别名(指向
src/lib
目录)。

例如

@font-face {
  /* ... */
  src: url('../../fonts/SpaceMono-Regular.tts');
}
@font-face {
  /* ... */
  src: url('$lib/fonts/SpaceMono-Regular.tts');
}
© www.soinside.com 2019 - 2024. All rights reserved.