CSS 在 HTTPS 中加载 Google 字体，内容被阻止
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24533912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading Google font in HTTPS, content being blocked
提问by vico
There is a wordpress theme that automatically pulls the option font picked and requests it from google font. when ssl was needed for a few selected pages the font became missing
有一个 wordpress 主题可以自动拉取选择的字体并从谷歌字体请求它。当一些选定的页面需要 ssl 时，字体就变成了missing
Viewing the console log:
查看控制台日志：
[blocked] The page at 'https://www.example.com/' was loaded over HTTPS, but ran insecure content from 'http://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,500,700,800': this content should also be loaded over HTTPS.
[已阻止] ' https://www.example.com/' 上的页面已通过 HTTPS 加载，但运行了来自 ' http://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,500,700,800' 的不安全内容：此内容也应通过 HTTPS 加载。
would going into the code and make all requests in https from google font work? Is there some workaround to this?
会进入代码并让谷歌字体在 https 中的所有请求工作吗？有什么解决方法吗？
found the source code... but seems like it is already doing this... could there be a error in the if logic?
找到了源代码...但似乎它已经在这样做了... 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.'" />';
}
回答by Stefano Sanfilippo
Edit your theme replacing every occurence of http://fonts.googleapis.com/...with https://fonts.googleapis.com/...(mind the s).
编辑您的主题，替换每次出现的http://fonts.googleapis.com/...with https://fonts.googleapis.com/...（注意s）。
Resources that might pose a security risk (such as scripts and fonts) must be loaded through a secure connection when requested in the context of a secured page for an obvious reason: they could have been manipulated along the way.
可能造成安全风险的资源（例如脚本和字体）必须在安全页面的上下文中被请求时通过安全连接加载，原因很明显：它们可能在此过程中被操纵。
回答by harmv
使用协议相对 URI
Just use a //prefix. (instead of http[s]://)
只需使用//前缀。( instead of http[s]://)
- On an https page, the secure version wil be loaded.
- On on a plain http page, the plain http version will be loaded.
- 在 https 页面上，将加载安全版本。
- 在普通 http 页面上，将加载普通 http 版本。
Edit your theme replacing every occurence of http://fonts.googleapis.com/...with //fonts.googleapis.com/...
编辑您的主题，替换每次出现的http://fonts.googleapis.com/...with//fonts.googleapis.com/...
回答by Yatender Singh
let the browser handle all the things just remove 'http' from your reference.
让浏览器处理所有事情，只需从您的参考中删除“http”即可。
likewise you have to do for other libraries also if you are facing same problem with them e.g.
同样，如果您遇到同样的问题，您也必须为其他图书馆做，例如
https://fonts.googleapis.com/css?family=Open+Sans:700,600,800,400
to
到
//fonts.googleapis.com/css?family=Open+Sans:700,600,800,400
same for
同样的
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
to
到
//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
回答by Ashish Devade
I faced this problem when you are using google cdn links and which are not accessible (such as country like china), try to use local files in place of cdns
当您使用 google cdn 链接并且无法访问（例如china这样的国家/地区）时，我遇到了这个问题，请尝试使用本地文件代替 cdn
