构建后将 Google 字体添加到 Angular 项目答案

【问题标题】：Add Google Font to Angular project after build构建后将 Google 字体添加到 Angular 项目
【发布时间】：2021-10-24 08:32:12
【问题描述】：

我的客户希望能够在构建后将 Google 字体注入到他们的应用程序中，例如通过配置文件进行配置。我的客户有一个应用程序部署在他们的几个客户上，并且希望能够选择使用的 Google 字体等内容，而无需为每个部署构建新的解决方案。

当我通常在 Angular 项目中包含 Google 字体时，我会添加一个指向 index.html 文件的链接，如下所示：

<head>
  ...
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  ...
</head>

<body>
  <gcp-root></gcp-root>
</body>

由于这是一个 HTML 文件，我认为我不能在这里使用变量作为字体的名称，所以这需要在编译之前完成。

有人对我如何能够在运行时发生这种情况有任何建议吗？也许我可以在运行时将链接添加到页面？

任何建议将不胜感激

【问题讨论】：

标签： angular google-fonts

【解决方案1】：

你可能想要这样的东西吗？

下载字体并将ttf 文件保存在项目的src/assets/fonts 文件夹中。

src/style.css：

在您的src/style.css 中输入以下代码：

@font-face {
  font-family:"Roboto";
  src:url("./assets/fonts/Roboto-Regular.ttf") format("truetype");      
  font-weight:normal;
  font-style:normal;
}

src/assets/config.json：

在您的src/assets/config.json（创建config.json 文件）中输入以下代码：

{
  "title": "Roboto"
}

.ts:

在您的组件中相应地放入以下代码：

import { ConfigLoaderService } from './config-loader.service';

...

public title = '';

...

ngOnInit() {
   this.title= this.configLoaderService.appTitle;
}

applyStyles() {
   const styles = {'font-family' : this.title};
   return styles;
}

.html:

在您的模板中调用applyStyles()，如下所示：

<span [ngStyle]="applyStyles()">Roboto Font Family</span>

【讨论】：

谢谢您，这非常有效！实际上，我可以简单地使用 @font-face 将字体包含在特定于客户端的 CSS 文档中，我还可以将它分配给所需的元素