Less: @import url 在缩小后使用 http 而不是 https

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

最初我虽然可能是我的错误，但字体已经使用源协议导入。这只会在代码被缩小后发生。

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

Answer 1

如果您在 https 上托管网站，那么您将运行遇到使用 http 协议导入外部文件的麻烦。

我建议您下载 google 字体并将其托管在网站上。

或其他选项。

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

将文件转换为数据字符串(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 2

结果是 minifier I am using automatically turns an import starting with //myurl to http://myurl and that was causing my issue. I added the processImport: false option，现在一切正常。

关于此行为的问题已在 GitHub 上提出。

Answer 3

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

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

所以就像我的情况一样，gulp 正在将 fonts.googleapis.com 更改为 http://fonts.gstatic.com，因为我的网站在 https chrome 上出错。 "blacklisting" 使用上述选项对我有用。虽然我认为必须有其他选项，比如添加 https 导入的选项。

Less: @import url 在缩小后使用 http 而不是 https

Less: @import url using http instead of https after minification

css

angularjs

fonts

less

minify