Angular 9：在生产模式下，从fonts.google.com导入SCSS无法正常工作。

Question

我正在使用以下语法在 Angular 9 应用程序的 `style.scss` 中导入字体：

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');

这在我运行 ng serve 时有效。然而，当 Angular 打包以生产模式部署时，该导入似乎不起作用。生成的打包文件没有尝试加载这种字体 - 没有任何网络请求。此外，在 Chrome 控制台中也没有错误。

我本地安装的字体可以正常工作 - 所以我怀疑这与第三方托管的字体有关。

@font-face {
  font-family: Korolev;
  font-weight: 600;
  font-style: normal;
  src: url('assets/fonts/korolev-medium-webfont.ttf');
}

跟踪错误，它与称为 injectStylesIntoStyleTag.js 的东西有关，来自于 Webpack 的 style-loader。当在开发模式下运行 ng serve 时，这似乎起了作用，因为我们可以看到从创建在头部中加载字体的 <style> 的脚本发起了请求。然而，当以生产模式运行时，要么加载字体的机制不同，要么似乎没有启动。

• 在 Angular 生产模式中，第三方 SCSS 导入是否正常工作？

• 如果不建议使用 import 导入第三方字体，则使用什么机制在样式表中使用第三方字体更好？

- Mikko Ohtamaa

---

你有没有找到解决这个问题的方法？我也遇到了同样的行为，但其他人验证后却没有发现！ - Shimrod

我没有找到合适的解决方案。我只是在 index.html 中硬编码了字体链接。 - Mikko Ohtamaa

这就是我所做的。至少它不再在我的捆绑包中了，这降低了大小，但我真的不明白为什么它在我的电脑上不起作用... - Shimrod

Answer 1

我曾经遇到同样的问题，现在通过查看github上Angular的这个问题进行了挖掘并解决了这个问题：

实际上，我之所以遇到此问题，是因为我的@import语句引入谷歌字体的方式没有在编译后的CSS文件中作为第一行呈现。我最近升级了我的Angular版本。不确定为什么会出现这种变化，但我通过将我的字体导入拆分成scss局部文件并在任何其他文件之前导入该局部文件来解决了我的问题。结果是，我的字体@imports是styles.css的第一行。

简要总结：
@import语句必须位于编译后的CSS文件的顶部，否则它们将被忽略。

为了做到这点，我创建了一个名为font.scss的文件，其中包含所有我的@import，如下所示：

@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
// [...]

然后，您需要更新 angular.json 以首先加载此文件：

...
"styles": [
    "src/assets/scss/fonts.scss",
    "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
    "src/styles.scss"
],
...

- Mattew Eon