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

创建架构不可知的URL

更改http://fonts.google...到//fonts.google...

掉落http:或https:从正面看,浏览器将使用您目前使用的网站上哪个架构.

您可以使用httpsfrom http而不是相反的方式请求资源.上述解决方案(也可能是最佳实践)的替代方案是只使用 https它(如果你使用这种链接方式必须使用它,否则它无论如何都没有意义).

Answer 2

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

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

如果您的页面是HTTPS,则将从HTTPS URL加载字体.如果页面是HTTP,则将从HTTP URL加载.