如何为SixLabors.Fonts的SystemFonts添加字体？Blazor WASM遇0字体问题

数据老陈

2026-8-14

在Blazor WebAssembly中使用SixLabors.Fonts加载自定义字体

Blazor WebAssembly运行在浏览器沙箱环境中，无法访问本地系统的字体目录，所以SystemFontCollection会返回空集合，无法直接调用系统字体。要解决这个问题，需要手动将字体文件嵌入项目并加载，具体步骤如下：

1. 添加字体文件到项目

在Blazor WASM项目的wwwroot目录下创建fonts文件夹。
将需要使用的字体文件（例如.ttf、.otf格式）复制到这个文件夹中。
在开发工具中选中这些字体文件，右键设置属性：将「复制到输出目录」设为「如果较新则复制」，「生成操作」设为「内容」。

2. 加载字体到FontCollection

在Program.cs或者需要使用字体的服务/组件中，创建FontCollection实例并加载字体文件。示例代码如下：

using SixLabors.Fonts;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

// 注册FontCollection为单例服务
builder.Services.AddSingleton(sp =>
{
    var fontCollection = new FontCollection();
    // 加载wwwroot/fonts下的字体文件
    using var fontStream = sp.GetRequiredService<IHttpClientFactory>().CreateClient()
        .GetStreamAsync("fonts/NotoSansSC-Regular.otf").Result;
    fontCollection.Add(fontStream);
    return fontCollection;
});

await builder.Build().RunAsync();

3. 使用加载的字体

在需要使用字体的组件或服务中，注入FontCollection，然后创建Font对象：

@inject FontCollection FontCollection
@using SixLabors.Fonts

@code {
    private Font _customFont;

    protected override void OnInitialized()
    {
        // 从集合中获取字体家族，创建指定大小的字体
        var fontFamily = FontCollection.Get("Noto Sans SC");
        _customFont = fontFamily.CreateFont(12);
    }
}