根据页面协议加载 css答案

【问题标题】：Load css depending depending on protocol of page根据页面协议加载 css
【发布时间】：2020-04-27 12:01:19
【问题描述】：

我在同一个 css 文件中有 2 个 @font-face

@font-face {
    /* code for https://site.con */
    }
@font-face {
        /* code for http://site.con */
    }

当网站是 https 时，我只需要加载第一个 @font-face，而当网站是 http 时，我只需要加载第二个。

有可能吗？用 js/jquery 还是其他方法？

【问题讨论】：

这两条规则到底有什么区别？
如果您因为混合内容错误而这样做，您可以同时使用 https。
@MarcBarbeau 是的，我有一个混合内容错误，但我正在使用这两个网站，https 和 http
如果规则之间的唯一区别是 http 和 https，那么您的 css 规则可以放弃它。 //yourUrl/path/file.ext 将使用页面当前使用的任何协议
你不能在不定义 https 或 http 的情况下使用 //fonts.googleapis.com/css?family=Foo 吗？

标签： javascript jquery html css font-face

【解决方案1】：

你可以用javascript/jquery来做，解决步骤：

检查网站是否为 https。

if (location.protocol != 'https:')
{
//http font
} else {
//https font
}

加载正确的字体。

$("head").prepend("<style type=\"text/css\">" + 
                                "@font-face {\n" +
                                    "\tfont-family: \"myFont\";\n" + 
                                    "\tsrc: local('☺'), url('myFont.otf') format('opentype');\n" + 
                                "}\n" + 
                                    "\tp.myClass {\n" + 
                                    "\tfont-family: myFont !important;\n" + 
                                "}\n" + 
                            "</style>");

【讨论】：