Chrome 上 HTTPS 页面上的 Google Web 字体答案

【问题标题】：Google Web Fonts on HTTPS pages on ChromeChrome 上 HTTPS 页面上的 Google Web 字体
【发布时间】：2016-03-11 01:57:26
【问题描述】：

我正在从事一个电子商务项目。默认情况下，网站的某些部分是 HTTP。其他的，例如结帐页面，默认是 HTTPS。在 HTTPS 页面上，我在 Chrome 的控制台上收到此消息：

[blocked] The page at https://store-ws3q9h.mybigcommerce.com/checkout.php?tk=c99fa39e007db6376dcddaac68695c22 ran insecure content from http://fonts.googleapis.com/css?family=PT+Sans. 
[blocked] The page at https://store-ws3q9h.mybigcommerce.com/checkout.php?tk=c99fa39e007db6376dcddaac68695c22 ran insecure content from http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700.
[blocked] The page at https://store-ws3q9h.mybigcommerce.com/checkout.php?tk=c99fa39e007db6376dcddaac68695c22 ran insecure content from http://fonts.googleapis.com/css?family=Patua+One.

字体以这种方式链接在文档头部：

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>

到目前为止，在我测试过的其他浏览器上看起来还可以。

【问题讨论】：

标签： fonts https

【解决方案1】：

创建与架构无关的网址

将http://fonts.google... 更改为//fonts.google...

从前面删除http: 或https:，浏览器将使用您当前在网站上使用的任何架构。

您可以使用来自http 的https 请求资源，但不能使用另一个一路走来。上述解决方案的替代方案（可能是最佳实践）是始终使用 https 如果它可用（如果你使用这种风格，它必须是的链接，否则无论如何都没有意义）。

【讨论】：

【解决方案2】：

从您的 URL 中删除协议并让浏览器确定它：

<link href="//fonts.googleapis.com/css?family=PT+Sans" ...

如果您的页面是 HTTPS，字体将从 HTTPS URL 加载。如果页面是 HTTP，它将从 HTTP URL 加载。

【讨论】：