Question

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

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

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

谢谢！

Answer 1

我以前从未做过，但是我猜想解决方案是在页面<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>中动态添加和删除样式。

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对象仅在您确定要在浏览器中运行角度应用程序并且从导入中的document导入CommonModule时可用为您的角度应用程序。 See reference here。

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

免责声明2：上面的代码可能会使您面临安全漏洞（XSS）。最好用控制台angular security guidelines正确执行操作。

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的一项功能，使您可以更改客户端发出的任何请求。一种常见的做法是在每个请求中添加一个身份验证令牌，这样您的后端可以确定受用户及其数据约束的字体，并将其作为请求的答案发送。

尽管这是可行的，但我想为您提供一个更简单的解决方案（我认为）-如果您使用的字体集有限，则可以在客户端服务器中简单地将它们创建为静态资产（将它们放在{ {1}}文件夹），然后-在客户端中-根据您从后端获得的有关用户的一些信息，确定要使用的字体。例如-为每种字体创建一个CSS类，然后根据“选定的字体”将此类动态分配给您的body元素。

从网络动态加载前端到Angular：可以吗？

2 个答案: