时间戳

首页 > 解决方案 > 如何在 Index.razor 页面上为 Blazor 使用谷歌字体

c# - 如何在 Index.razor 页面上为 Blazor 使用谷歌字体

问题描述

@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#cssblazor

解决方案

@用于作为 Razor 代码的前缀，因此您需要使用第二个@. 尝试：

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

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

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

推荐阅读