从Web动态加载前端到Angular：可能吗？

Question

我需要能够从后端服务器加载字体以在 Angular 中设置文本样式。 我将字体的网址（例如：'website.com/myfont.ttf'）和名称（在本例中为：'myfont'）存储在变量中。

我还有一个带有

<label>

的组件，必须使用此自定义字体进行样式化。请注意，我的字体来自后端，它必须是完全动态的。 在花了几个小时寻找解决方案并测试我发现的所有内容（FontFace、WebFontLoader、add-font...）之后，我开始认为这可能是不可能的:(。

总结一下：我的 Angular 应用程序从后端 API 获取 JSON 格式的字体列表。它获取服务器上的字体 URL 及其名称。我想使用用户选择的字体并将其动态应用到某些元素（标签、div 等）。

Answer 1

我以前从未这样做过，但我猜解决方案是在页面中动态添加和删除样式

head

。

let fontName = ...; // Your font name
let fontUrl = ...; // The fully qualified url of your font

let style = document.createElement('style');
style.innerText = "@font-face { font-family: '" + fontName + "'; src: url('" + fontUrl + "'); }";
document.head.appendChild(style);

然后修改元素的样式，添加

font-family

和您正在加载的

fontName

。

顺便说明一下，仅当您确定在浏览器中运行 Angular 应用程序，并且在 Angular 应用程序的导入中从

document

导入

CommonModule

时，

@angular/common

对象才可用。 请参阅此处参考。

免责声明：直接修改 DOM 可能违反角度原则，请注意。

免责声明2：上面的代码可能会给您带来安全漏洞（XSS）。最好控制角度安全准则以正确执行此操作。

Answer 2

在SCSS中，您可以使用

@font-face

装饰器来定义自定义字体：

@font-face {
  font-family: "Segoe UI";
  src: url('assets/segoeuil.ttf') format("truetype");
}

请注意，在我的示例中我使用了静态字体文件。如果您想查询后端以返回其选择的字体，只需创建一个专用端点，然后将其 url 放在这里即可。

如果您希望字体对用户具有主观性，则需要将此信息添加到请求中。为此，您可以使用

HttpInterceptor

(https://angular.io/api/common/http/HttpInterceptor)，这是 Angular 的一项功能，使您能够更改客户端发出的任何请求。常见的做法是为每个请求添加身份验证令牌，这样您的后端就可以确定用户及其数据主观的字体，并将其作为请求的答案发送。

虽然这是可能的，但我想为您提供一个更简单的解决方案（在我看来） - 如果您有一组有限的字体，您可以简单地将它们创建为客户端服务器中的静态资产（将它们放在

assets

文件夹），然后 - 在客户端 - 根据从后端获得的有关用户的一些信息确定要使用的字体。例如 - 为每种字体创建一个 css 类，并根据“所选字体”动态地将此类分配给您的 body 元素。