在 HTTPS 中加载 Google 字体，内容被阻止答案

【问题标题】：Loading Google font in HTTPS, content being blocked在 HTTPS 中加载 Google 字体，内容被阻止
【发布时间】：2014-08-23 09:49:19
【问题描述】：

有一个 wordpress 主题可以自动提取选择的字体并从 google 字体中请求它。当一些选定的页面需要 ssl 时，字体变为 missing

查看控制台日志：

[阻止] 'https://www.example.com/' 处的页面通过 HTTPS 加载，但运行来自 'http://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,500,700,800' 的不安全内容：此内容也应通过 HTTPS 加载。

是否会进入代码并让来自 google 字体的 https 中的所有请求正常工作？有什么解决方法吗？

找到源代码...但似乎已经在这样做... if 逻辑中是否有错误？

$prefix = "http";
            if(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') $prefix = "https";

            if($get_google_font){

            if(!in_array($rule_split[0], $this->used_fonts))
            {
                $this->extra_output .= "\n<!-- google webfont font replacement -->\n";
                $this->extra_output .= '<link id="google_webfont_'.$this->webfont_count.'" rel="stylesheet" type="text/css" href="'.$prefix.'s://fonts.googleapis.com/css?family='.str_replace(' ','+',$rule_split[0]).$font_weight.'" />';
            }

【问题讨论】：

标签： css wordpress fonts https mixed-content

【解决方案1】：

编辑您的主题，将每次出现的http://fonts.googleapis.com/... 替换为https://fonts.googleapis.com/...（注意s）。

在安全页面的上下文中请求时，必须通过安全连接加载可能带来安全风险的资源（例如脚本和字体），原因很明显：它们可能在此过程中被操纵。

【讨论】：

是的，相反（在非安全页面中通过 TLS/SSL 加载资源）是可能的。
OK 只需要确认一下，那我就进入代码了。谢谢~
对我发布的代码有任何想法吗？似乎已经这样做了，但即使在 https 上，if 语句似乎也是错误的
您在<link ... 行中留下了虚假的s://。无论如何，你不需要那个，只需使用protocol relative URIs 就可以了。
三年后，情况发生了变化。现在不鼓励使用与协议相关的 URI，因为对于许多常见用途来说，安全连接更容易设置并且非常便宜，如果不是几乎免费的话。如果您可以通过https 提供服务，那么请务必这样做。

【解决方案2】：

使用protocol relative URIs

只需使用// 前缀。 (instead of http[s]://)

在 https 页面上，将加载安全版本。
在纯 http 页面上，将加载纯 http 版本。

编辑您的主题，将每次出现的http://fonts.googleapis.com/... 替换为//fonts.googleapis.com/...

【讨论】：

【解决方案3】：

让浏览器处理所有事情，只需从您的参考中删除“http”即可。

同样，如果您遇到与其他库相同的问题，您也必须为其他库执行此操作例如

https://fonts.googleapis.com/css?family=Open+Sans:700,600,800,400

到

//fonts.googleapis.com/css?family=Open+Sans:700,600,800,400

同样的

http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

到

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

【讨论】：

【解决方案4】：

当您使用google cdn链接并且无法访问（例如中国等国家/地区）时，我遇到了这个问题，请尝试使用本地文件代替cdns

【讨论】：

我想知道是否有一种方法可以同时使用这两种方法...即使用 google 链接的脚本，但如果它不起作用，则依赖本地文件获取相同的字体。