Blazor WebAssembly CSS 已加载，但字体未加载，使用 HeadContent 和 HeadOutlet

Question

我的布局中有这个：

@{
    string lang = loc["lang"];
    string siteStyleSheetName = $"site-{lang}.css";
}
<HeadContent>
    <link href=@($"css/{siteStyleSheetName}") rel="stylesheet" />
</HeadContent>

我的样式表看起来像这样：

@font-face {
    font-family: 'Imperial';
    src: url('fonts/en/imperial-normal-400.woff') format('woff'), url('fonts/en/imperial-normal-700.woff') format('woff');
}


@media (max-width: 1600px) {


    html, body {
        font-family: Imperial, Tahoma, 'Helvetica Neue', Helvetica, Arial, sans-serif;
        width: 100%;
        font-size: 16px;
    }
}

@media (max-width: 767.98px) {
   
}

字体文件夹与我的 css 文件位于同一文件夹中，我可以验证 site-en.css 是否已加载到浏览器源中，但 css 加载但字体不加载，此确切设置适用于 blazor 服务器，但不适用于 WebAssembly。 帮助。

Answer 1

您应该检查这是否不是引导问题。这是给我的。打开检查器后，我发现引导程序正在用自己的变量--bs-font-sans-serif覆盖字体系列。非常有趣。

在你的 app.css 中，尝试这样做：

@font-face {
    font-family: 'Cherry Bomb One';
    src: url('fonts/CherryBombOne-Regular.ttf') format('truetype');
}

:root {
    --bs-font-sans-serif: "Cherry Bomb One", Roboto, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans";
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1 {
    font-family: "Cherry Bomb One", cursive;
}

您应该在 H1 中看到足够的字体。

在我的示例中，字体位于 wwwroot/fonts 上。