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

Question

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

我也有一个组件，必须使用此自定义字体对其进行样式化。 请注意，我的字体来自后端，它必须完全动态。 花了数小时寻找解决方案并测试了我发现的所有内容（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);

然后修改元素的样式，添加一个带有正在加载的fontName的font-family 。

附带说明一下，仅当您确定要在浏览器中运行CommonModule应用程序并且从@angular/common中导入CommonModule应用程序中的CommonModule ， document对象才可用。 请参阅此处的参考 。

免责声明：直接修改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元素。