Blazor/Razor CSS隔离场景下处理字体@import的正确方式是什么

根本原因 #

Blazor CSS隔离机制的两个核心特性导致你遇到的问题：

1. 隔离CSS文件（.cshtml.css/.razor.css）原生禁止使用@import规则，这是RZ5000报错的直接原因，属于框架设计限制，没有绕过方案。
2. 隔离CSS中的所有规则都会被自动添加唯一作用域属性前缀，@font-face属于全局规则，被加上前缀后会被浏览器直接忽略，这是方案2失效的原因。

方案1失效排查 #

你之前的方案1逻辑是完全正确的，无法生效一般是以下几个可排查的低级问题：

• 检查inter.css中定义的font-family名称和你隔离CSS中引用的名称是否完全一致，官方Inter字体的标准族名为Inter，可变字体版本为Inter var，名称写错会直接导致字体不生效。
• 打开浏览器开发者工具的「元素」面板，选中登录页的文本元素，查看计算样式中的字体属性，确认是否被更高优先级的全局CSS规则覆盖。
• 切换到「网络」面板，确认inter.css和对应的字体woff2文件都加载成功，没有跨域、404类错误。

正确实现方式 #

全局使用Inter字体（推荐，性能最优）

1. 保留布局文件中字体样式的link标签，确保顺序在Blazor生成的隔离CSS bundle之前：

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

2. 可直接在全局CSS中设置默认字体，无需每个页面重复声明：

/* wwwroot/css/site.css */
body {
    font-family: 'Inter', sans-serif;
}

仅登录页使用Inter字体

1. 将inter.css中的所有@font-face声明复制到全局非隔离CSS文件（如wwwroot/css/site.css），不要写在隔离CSS中。
2. 在login.cshtml.css中仅针对登录页元素指定字体即可：

/* login.cshtml.css */
.login-container * {
    font-family: 'Inter var alt', sans-serif;
}

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