Angular 9中使用动态字体的最佳方式

Question

我想根据我输入的品牌代码创建一个可以是多个品牌的网站，所以我使用服务(brand.service(来设置品牌接口(brand.ts(，到目前为止，属性是：

export interface Brand {
status: number;
logoUri: string;
primaryColour: string;
secondaryColour: string;
tertiaryColour: string;
fontFace: string;
}

除了字体之外，我已经动态加载了所有内容。比如说，我有一个在线字体链接：

http://example-font.com/Raleway.woff

我创建了一个名称：

Raleway常规

如何使用ngStyle在需要的地方应用字体(如果可能的话(？

编辑：对于颜色，我使用以下ngStyle指令：

<p [ngStyle]="{'color': brand?.primaryColour}"><i class="fad fa-palette"></i> Primary Colour</p>

Answer 1

您可以使用ngClass，并根据您的品牌代码使用三元运算符更改类

<p [ngClass]="{brandCode === 'yourCode' ? 'withFont' : 'withoutFont' }">test</p>

以及在您的css 中

.withFont {
font-family: 'Raleway Regular', sans-serif;
}
.withoutFont {
font-family: 'another font';
}