角度组件模板全局动态字体

Question

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

由于该组件呈现了相当多的材质组件，因此有很多“Roboto”风格。

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

* {
    font-family: Lato !important;
  }

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

但是如何让这种动态？ 我在模板中尝试了一个内联脚本标记，但是这会被angular剥离（除了这个例子之外有意义）。

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

Answer 1

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

应用该类

例如，创建一个serif类，如下所示：

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

然后将其应用于AppComponent ngClass：

<div [ngClass]="fontClass">

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