在 Angular 中使用谷歌字体会引发网络错误 [_ngcontent-X];400[_ngcontent-X];600[_ngcontent-X]

【问题标题】：Use google fonts in Angular throws network error [_ngcontent-X];400[_ngcontent-X];600[_ngcontent-X]在 Angular 中使用谷歌字体会引发网络错误 [_ngcontent-X];400[_ngcontent-X];600[_ngcontent-X]
【发布时间】：2021-06-15 00:08:51
【问题描述】：

我看到很多这样的网络错误：

>     Request URL: https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300[_ngcontent-c6];400[_ngcontent-c6];600[_ngcontent-c6];700&display=swap
>     Request Method: GET
>     Status Code: 400

它正在将 [ng-content] 添加到请求 url，有没有办法解决这个问题？

这里可以看到网络中的错误：https://stackblitz.com/edit/angular-scss-demo-r7csxc?file=src/app/app.component.scss

问候！

【问题讨论】：

解决方法是替换这个：

标签： angular google-font-api

【解决方案1】：

解决方法是替换这个：

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700&display=swap');

有了这个：

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@700&display=swap');

【讨论】：