根据页面协议加载 css

Question

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

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

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

可能吗？使用 js/jquery 或其他方法？

Answer 1

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

1. 检查站点是否为 https。

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

2. 加载正确的字体。

$("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>");