Chrome上HTTPS页面上的Google Web字体

Question

我正在开发电子商务项目。默认情况下，该网站的某些部分是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'> 

它看起来在其他浏览器我有确定到目前为止测试。

Answer 1

创建模式无关的网址

变化http://fonts.google...到//fonts.google...

删除从前面http:或https:，浏览器将使用您目前使用的网站上哪个架构。

您可以使用https从http请求资源，而不是其他 方式轮。上述解决方案（可能是最佳做法）的一种替代方法是只要总是使用 https（如果您使用链接的这种样式 ，否则无论如何都没有意义）。

Answer 2

从您的URL协议，让浏览器判断：

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

如果你的页面是HTTPS，字体就会从HTTPS URL加载。如果该页面是HTTP，它将从HTTP URL加载。