Динамическое добавление правила @ font-face в IE 8 и менее - PullRequest
Новая
       4

Динамическое добавление правила @ font-face в IE 8 и менее

8 голосов
/ 28 октября 2011

Я добавляю правила @ font-face, используя метод IEs stylesheet.addRule (). Однако символ @ является недопустимым символом для аргумента «селектор» этого метода, поэтому я получаю ошибку «неверный аргумент». 

s.addrule("@font-face", "font-family: 'Font Name'; src:url('/fonts/font.eot') etc...)";

Есть ли другой способ динамически добавлять эти правила?

Я попытался установить свойство innerHTML элемента style, установить свойство cssText свойства styleSheet и добавить текстовый узел также к элементу style (что приводит к сбою IE).

Какие еще способы попробовать?

1 Ответ

6 голосов
/ 31 октября 2011

Установка свойства cssText работает, но вы ДОЛЖНЫ вставить элемент style в документ перед добавлением правила @ font-face в документ. Например ... 

var s = document.createElement('style');
s.type = "text/css";
document.getElementsByTagName('head')[0].appendChild(s);
s.styleSheet.cssText = "@font-face {" + rule + "}";

Насколько я могу судить, вполне возможно установить другие типы правил CSS перед вставкой элемента стиля на страницу, но не @ font-face.

Например ... это отлично работает: 

var s = document.createElement('style');
s.type = "text/css";
s.styleSheet.cssText = "body { background: red}";
document.getElementsByTagName('head')[0].appendChild(s);

Но это приводит к сбою IE 8 и менее: 

var s = document.createElement('style');
s.type = "text/css";
s.styleSheet.cssText = "@font-face {" + rule + "}";
document.getElementsByTagName('head')[0].appendChild(s);
...