Загрузка css в зависимости от протокола страницы

Question

У меня есть 2 @ font-face в том же css файле

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

, и мне нужно загрузить только первое @ font-face, когда сайт https, и только второе, когда сайт http.

Возможно ли это? с помощью js / jquery или другого метода?

Answer 1

Вы можете сделать это с помощью javascript / jquery, шаги решения:

1. проверить, является ли сайт 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>");