Angular 组件模板全局动态字体

Question

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

由于该组件渲染了相当多的 Material 组件，因此有许多“Roboto”样式。

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

* {
    font-family: Lato !important;
  }

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

但是如何使其动态化呢？ 我在模板中尝试了内联脚本标记，但这被 Angular 剥离了(有意义，除了这个示例)。

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

Answer 1

您可以为每种字体创建一个类，并使用 [ngClass] 应用该类

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

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

然后使用 ngClass 将其应用到您的 AppComponent:

<div [ngClass]="fontClass">

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