phu*_*der 5 google-fonts angular
我的客户希望能够在构建后将 Google 字体注入到他们的应用程序中，例如，通过配置文件进行配置。我的客户有一个应用程序，他们部署在他们的几个客户上，并且希望能够选择使用的 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>
| 归档时间： |
|
| 查看次数： |
46 次 |
| 最近记录： |