【问题标题】：How to use google font for Blazor on Index.razor page如何在 Index.razor 页面上为 Blazor 使用谷歌字体
【发布时间】：2021-06-24 13:25:25
【问题描述】：

@page "/"

<style>
@import url('https://fonts.googleapis.com/css2?family=Work+Sans');
    body {
        margin: 0;
        font-family: 'Work Sans';
        color: #4d4d4d;
    }
        
</style>

在 React.js 中，我可以简单地使用 @import 来使用标签来使用 Google 字体，但在 Blazor 中我得到了错误 The name 'import' does not exist in current context。为 Blazor 应用全局使用 Google 字体的正确方法是什么。

【问题讨论】：

标签： c# css blazor

【解决方案1】：

@ 用于作为 Razor 代码的前缀，因此您需要使用第二个 @ 对其进行转义。试试：

 . . .
<style>
@@import url('https://fonts.googleapis.com/css2?family=Work+Sans');
 . . .

或者，如果您希望将其本地化为单个页面，请使用CSS-Isolation：

在与 Index.razor 相同的目录中创建一个 Index.razor.css 文件。
这是一个“普通”的 css 文件，因此您可以像往常一样编写 css，而不必担心转义 @。

【讨论】：

【解决方案2】：

在 blazor 中，添加字体比 reactjs 稍微复杂一点。

步骤

将名为 fonts 的新目录添加到 wwwroot
下载 .woff 字体文件
将 .woff 文件复制到 wwwroot 中的字体目录
然后在 site.css 中应用以下 CSS

@font-face {
    font-family: '<FONT-FAMILY>';
    src: url('../fonts/<FONT.WOFF>');
}

将FONT.WOFF 替换为您的字体名称，将FONT-FAMILY 替换为您正在使用的字体系列的名称！我是从this blog得到这个的

【讨论】：