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

Question

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

当我通常将 Google 字体包含到 Angular 项目中时，我将 link 添加到 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 文件，我认为我不能在这里使用变量作为字体名称，所以这需要在编译之前完成。

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

如有任何建议，我们将不胜感激

Answer 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>

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

Add Google Font to Angular project after build

google-fonts

angular