Blazor/Razor CSS 隔离和 @import-ing 字体

Question

@import在 Blazor/Razor CSS 隔离中处理 font 的正确方法是什么？

我正在将 Blazor (.NET6 rc2) 项目转换为使用 CSS 隔离，但是某些 CSS 文件包含@import引用字体文件的语句。

例如，我有这些文件；

1. login.cshtml- 登录页面
2. login.cshtml.css- 其独立的 CSS
3. _LoginLayout.cshtml- 布局页面

CSS 中有以下行；

@import url('//rsms.me/inter/inter.css');

该导入的文件仅包含@font-face声明以及该//rsms.me服务器上的字体文件。

然而这无法编译，因为；

错误 RZ5000 @import 规则在作用域 CSS 文件中不受支持，因为加载顺序未定义。@import 只能放置在非作用域 CSS 文件中。

在这一点上，我想澄清的是，我对以下行为不太熟悉@font-face使用行为以及指令的工作原理 - 但这些是我尝试过的方法。

方法一

首先，我尝试将引用移动inter.css到布局文件中，然后再放置作用域 css-

    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
    <link rel="stylesheet" href="@(nameof(MyProject)).styles.css" />

这个可以编译，但是我的作用域 CSS 没有选择字体。我的猜测是@font-face声明必须是@import使用它们进行编辑或直接嵌入到 CSS 文件中。

方法2

接下来，我尝试将 的全部内容合并inter.css到我的 中login.cshtml.css，并修复网址，例如；

@font-face {
    font-family: 'Inter var alt';
    font-weight: 100 900;
    font-style: italic;
    font-named-instance: 'Italic';
    font-display: swap;
    src: url("//rsms.me/inter/font-files/Inter-italic.var.woff2?v=3.19") format("woff2");
}

URL 已解析，但字体仍未应用。

这里正确的方法是什么？