Angular8：每条路线加载不同的 google 字体

Question

我正在为我的前端项目使用 Angular8，我遇到了这样一种情况，我需要为每个 angular 路由使用不同的 google 字体。

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

任何人都可以建议一种在每个路由中加载单个 google 字体的方法吗？

Answer 1

您可以在每个 css 或要更改 google 字体的路径中使用 @import。

组件 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.