angular - Angular8：为每条路线加载不同的谷歌字体

Question

我正在为我的前端项目使用 Angular8，并且我遇到了需要为每个角度路径使用不同的谷歌字体的情况。

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

任何人都可以建议一种方法来为每条路线加载一种谷歌字体吗？

标签： angularangular-routingangular8google-font-api

Answer 1

您可以@import在要更改 google 字体的每个 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';
}

演示堆栈闪电战。