我正在构建一个Angular应用程序，我正在使用scss进行样式化，并希望导入谷歌字体。
我有一个fonts.scss，其中保存了与字体相关的所有内容。我导入Google字体如下：
字体.scss
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;500;700&display=swap');字符串
因为有不同的文件，我需要导入到不同的组件，我有一个名为imports.scss的文件，其中包含字体和更像颜色的变量。
导入.scss
@import 'src/styles/imports/fonts';
@import 'src/styles/imports/colors';型
现在，我的ng组件可以通过导入使用字体和变量：
@import 'src/styles/imports';型
即使变量和字体都正常工作，我在Google Chrome中得到以下错误：
platform-browser.js:789 GET https://fonts.googleapis.com/css2?family=Poppins:wght@300;400[_ngcontent-dsi-c57];700&display=swap net::ERR_ABORTED 400型
在Firefox中，我得到了这个错误：
The resource from "(link to google fonts)" was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).型
有办法解决这个问题吗？
1条答案
按热度按时间uqxowvwt1#
如果没有错误，Google API字体端点总是返回一个样式表，否则返回一个html错误页面。
这让我感到困惑，因为我有一个类似的问题，其中这个html代码（非常类似于你的scss代码）
字符串
我只在控制台记录了这个
由于MIME类型（“text/html”）不匹配（X-Content-Type-Options：nosniff），来自“https：//fonts.googleapis.com/css？family = Source + Code”的资源被阻止。
很难理解的是，我的浏览器请求了一个样式表（
Content-Type: text/css），但谷歌回应了一个html错误页面（Content-Type: text/html）。此外，谷歌服务器配置了一个nosniff头，如果请求的内容类型和要响应的响应类型不匹配，它基本上 * 甚至不会发送回错误页面 *。可悲的是，正是这个错误页面泄露了bug的来源（我在另一个窗口中打开了样式表URL）：
x1c 0d1x的数据
我做了一个错字，它的 * 源代码**亲 *，而不是 * 源代码 *，所以这
型
效果和预期的一样。我怀疑你那边也有类似的情况。