gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 11:38:58 26 4
gpt4 key购买 nike

我的客户希望能够在构建后将 Google 字体注入(inject)到他们的应用程序中,例如,通过配置文件进行配置。我的客户有一个应用程序,他们部署在他们的几个客户上,并且希望能够选择使用的 Google 字体之类的东西,而无需为每个部署构建新的解决方案。
当我通常将 Google 字体包含到 Angular 项目中时,我会添加一个指向 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 文件,我不认为我可以在这里使用变量作为字体名称,所以这需要在编译之前完成。
有没有人对我如何在运行时发生这种情况有任何建议?也许我可以在运行时将链接添加到页面?
任何建议将不胜感激

最佳答案

也许你想要这样的东西?
下载字体并保存 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>

关于angular - 构建后将 Google 字体添加到 Angular 项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68901946/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com