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

问题描述

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

>     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

问候！

解决方法

解决方法是替换这个：

@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');