小编Mem*_*can的帖子

@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到我的 …