代码之家 › 专栏 › 技术社区 › Varun Sukheja

Angular8:每个路线加载不同的谷歌字体

google-font-api angular8 angular-routing angular

0

Varun Sukheja · 技术社区 · 6 年前

我正在使用Angular8作为我的前端项目,我陷入了一种情况,我需要在每个角度路线上使用不同的谷歌字体。

一个可能的解决方案是,我通过在head部分导入项目所需的所有谷歌字体,然后进行更改 font-family 在组件CSS文件中。但这里的缺点是,我需要在第一次加载应用程序时下载所有不必要的谷歌字体。

有人能建议一种方法,在每条路线上加载一个谷歌字体吗?

0 回复 | 直到 6 年前

1

Plochie 6 年前

你可以用 @import 在每个css或路径中,你想要改变谷歌字体。

组件1 css

@import url('https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap');

p {
  font-family: 'Odibee Sans', cursive; /* Use font family anywhere in the component */
}

组件2 css

@import url('https://fonts.googleapis.com/css?family=Tomorrow&display=swap');

p {
  font-family: 'Tomorrow';
}

演示 stackblitz .