如何在 Blazor Web App 框架里限定字体的使用？

Question

我创建了一个 Blazor Web App 程序，并且在 (app.razor) 根组件 里，内联样式 style 里 写死了 body { font-family :'宋体'; } , 然后我创建一个 Razor Class Library 类库, 在前端代码里 <label class="form-label" style="font-family: '黑体';">测试内容</label>, 该类库页面依然能更改字体，我的最终想法是 整个工程 只能使用宋体，主要是要规避字体版权问题的使用，不能保证每个人在写页面的时候都使用免费的字体.

麻烦教一下有什么办法能让整个功能只能用我所规定的 字体 呈现，其他的自定义字体设置全无效呢？

Answer 1

Hi @929Free,

您可以跟着我的步骤进行尝试，我的项目中测试有效。

在我们的web项目中的app.css文件中添加如下的样式代码。

/* 强制所有元素使用 '宋体' 字体 */
* {
    font-family: '宋体', sans-serif !important;
}
/* 进一步确保所有常用的标签元素都使用 '宋体' 字体 */
body, h1, h2, h3, h4, h5, h6, p, label, input, button, textarea {
    font-family: '宋体', sans-serif !important;
}

测试步骤

1.创建RCL工程，并在Blazor Web项目中添加项目引用。

2.Component1.razor

<h3>Class Library Component</h3>
<label class="form-label" style="font-family: '黑体';">测试内容 Class Library Component</label>

3.检查页面元素，可以看到黑体被覆盖。

---

如果答案是正确的解决方案，请点击“接受答案”并投赞成票。如果您对此答案有其他问题，请点击“评论”。

注意：如果您想接收此线程的相关电子邮件通知，请按照我们的 文档 中的步骤启用电子邮件通知。

Best Regards

Jason