Question

我收到此错误：

Mixed Content: The page at 'https://theculprit.com/url' was loaded over HTTPS, but requested an insecure font 'http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTYnF5uFdDttMLvmWuJdhhgs.ttf'. This request has been blocked; the content must be served over HTTPS.

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

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

最初我虽然HTTPS assets loading over HTTP可能是我的错误，但是字体已经使用sources协议导入了。这只在代码缩小后才会发生。

我对fonts / css / less不太熟悉，所以我完全迷失了。如果有任何其他信息我可以提供帮助，请告诉我。

Answer 1

原来minifier我正在使用automatically从//myurl开始导入http://myurl导致我的问题。我添加了processImport: false option，现在一切正常。

已在GitHub上针对此行为打开了一个问题。

Answer 2

如果您在https上托管网站，那么您将无法使用http协议导入外部文件。

我建议您下载谷歌字体并在网站上托管。

或其他选择。

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

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

创建你的@ font-face例如。

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

并用数据值

替换您的网址

Answer 3

我遇到了同样的问题。但我不想使用@Aaron的解决方案，因为我的任何@import都无法正常工作。更好的选择可能是：

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

就像我的情况一样，gulp正在将fonts.googleapis.com更改为http://fonts.gstatic.com，因为我的网站位于https chrome上，这是错误的。使用上述选项“黑名单”对我有用。虽然我认为必须有其他选项，例如，添加https导入的选项。

减：@import url在缩小后使用http而不是https

3 个答案: