__layout.svelte中定义的@font-face无法作用于组件内表单元素怎么办

出现这个问题是两个常见的原因叠加导致的：

• Svelte 单文件组件的<style>标签默认开启组件样式隔离，你当前写的*通配符规则只会匹配__layout.svelte模板内直接编写的DOM元素，子组件内的元素、浏览器内置的全局默认样式都不会被这条规则覆盖。
• 绝大多数浏览器的用户代理样式表（内置默认样式）会给<input>、<button>、<select>、<textarea>这类表单控件单独设置font-family属性为系统默认字体，这部分样式的优先级高于你当前作用域不匹配的通配符规则，所以会触发字体回退到你本地安装的Fira Sans。

你可以二选一以下任意一种方案实现：

方案1：直接修改现有layout的样式规则 #

给你的全局样式加上:global()修饰符，同时显式指定表单元素的字体规则，修改后代码如下：

<style>
:global {
  @font-face {
      font-family: 'Inter';
      src: url('/inter.woff2') format('woff2-variations');
  }
  * {
      font-family: 'Inter', 'Fira Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
  }
  /* 显式指定表单元素继承父级字体规则，覆盖浏览器默认样式 */
  input, button, select, textarea {
      font-family: inherit;
  }
}
</style>

方案2：使用独立全局CSS文件（更推荐） #

这种方式更符合SvelteKit的项目规范，避免大量:global规则散落在组件样式中：

1. 新建全局样式文件，比如src/app.css，写入以下内容：

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

2. 在你的__layout.svelte文件顶部导入这个全局样式：

import './app.css';

两种方案修改后刷新页面即可看到表单元素已经应用Inter字体。

内容的提问来源于stack exchange，提问作者Leo Wilson