Css 更少：@缩小后使用http而不是https导入url

我得到这个错误：

混合内容：页面位于'https://theculprit.com/url'已通过HTTPS加载，但请求的字体不安全'http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTYnF5uFdDttMLvmWuJdhhgs.ttf'. 此请求已被阻止；内容必须通过HTTPS提供。

当我通过源代码查找字体通过HTTP而不是HTTPS导入的位置时，与字体导入相关的唯一一行是：

@import url('//fonts.googleapis.com/css?family=Open+Sans:400,700,300,600,800');

起初我认为可能是我的错误，但字体已经使用源协议导入。这只有在代码缩小后才会发生

---

我不太熟悉字体/css/less，所以我完全迷路了。如果我能提供任何其他信息来帮助您，请告诉我。

如果您在https上托管站点，则使用http协议导入外部文件时会遇到问题

我建议你下载谷歌字体并把它放在网站上

或者另一种选择

您可以在不导入外部文件的情况下使用webfonts。您可以使用数据uri将字体直接包含到css文件中。首先你需要下载谷歌字体

将文件转换为数据字符串（）

创建你的@font字体

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'),
       url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf')  format('truetype'),
       url('webfont.svg#svgFontName') format('svg');
}

并将URL替换为数据值

结果表明，我正在使用的将从

//myurl

开始的导入转换为

http://myurl

这就是我的问题所在。我添加了

processImport:false

，现在一切正常

---

关于上的此行为，出现了一个问题。

我也面临同样的问题。但我不想使用@Aaron的解决方案，因为这样我的@import就无法工作。 更好的选择可能是：

{processImportFrom: ['!fonts.googleapis.com']}

---

就像我的例子一样，gulp把fonts.googleapis.com改成了现在，因为我的网站在https上，chrome给出了错误信息。“黑名单”使用上述选项对我有效。尽管我认为肯定还有其他选项，比如添加https导入的选项。

您确定您的导入是https吗？导致问题的URL来自您正在导入的CSS，而不是JS行@MatthewGreen我假设使用“//myurl”启动导入会自动使用调用源的协议发出请求。这不对吗？我知道JS的行不是导致错误的原因，我只是把它列为另一个信息。它应该是这样工作的。您可以看到，当您点击font.googleapis URL时，该CSS中的链接的协议会根据您使用的内容发生更改。然而，在这种情况下，这显然是行不通的。我会尝试使用协议来查看错误是否消失，然后查看您的CSS导入是否实际使用了错误的协议。@MatthewGreen因此，当我将该导入行更改为使用https协议时，我看到gstatic url从http更改为https。我现在的问题是，如果我直接从浏览器中点击fonts.googleapis链接，怎么会在网络活动中根本看不到gstatic URL？没有下载任何内容。在实际站点上运行的字体导入是fonts.gstatic调用的源吗？它应该只在需要该资源时下载某些内容。所以你必须在你的CSS中使用它，而不是在你的计算机上已经有了该字体的本地副本才能下载。因此，仅仅在浏览器中点击URL并不是一个很好的测试。