时间戳

首页 > 解决方案 > Blazor/Razor CSS 隔离和@import-ing 字体

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

问题描述

@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服务器上的字体文件。

但是，这无法编译；

范围内的 CSS 文件不支持错误 RZ5000 @import 规则，因为加载顺序未定义。@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 文件中。

方法二

接下来，我尝试将 的全部内容合并inter.css到 mylogin.cshtml.css中，并修复 url，例如。

@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 解析，但字体仍未应用。

这里的正确方法是什么？

标签： c#razorblazor

解决方案

推荐阅读