Angular组件模板全局动态字体

Question

我正在尝试允许用户更改字体，这应该会动态更新组件。

由于该组件呈现相当多的 material 个组件，因此有许多 'Roboto' 样式。

如果我将其添加到全局 styles.css

* {
    font-family: Lato !important;
  }

它确实成功覆盖了所有其他字体样式。

但是如何让它充满活力呢？ 我在模板中尝试了一个内联脚本标签，但这被 angular 删除了（有意义，除了这个例子）。

我将尝试使用动态样式表 link 标记，但这意味着为每种字体创建一个样式表，一个正确的皮塔饼。 （我们有 14 种字体）。

Answer 1

您可以为每种字体创建一个 class，然后使用 [ngClass]

应用 class

例如，创建一个serifclass，像这样：

.serif * {
    font-family: serif !important;
}

然后将它应用到您的 AppComponent ngClass:

<div [ngClass]="fontClass">

其中fontClass是ts文件中设置的变量