在 __layout.svelte 中定义的 @font-face 无法从组件中的表单元素访问？

Question

我有一个 SvelteKit 项目，我在其中添加了一个自定义 @font-face，它应用于 *，如下所示，位于 __layout.svelte[= 中的 <style> 标记内20=]

@font-face {
    font-family: 'Inter';
    src: url('/inter.woff2') format('woff2-variations');
}
* {
    font-family: 'Inter', 'Fira Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
}

大多数内容在 Inter 中按预期显示，包括组件内部的 <label>s。但是，组件中的表单元素 (<input>、<button>) 会退回到 Fira Sans（我已在本地安装）。除了 font-size，组件内部没有应用其他字体样式。

如何将自定义字体应用于这些元素？

Answer 1

您必须在 app.css 中添加全局访问 css。

@font-face {
    font-family: 'Inter';
    src: url('/inter.woff2') format('woff2-variations');
}
* {
    font-family: 'Inter', 'Fira Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
}