Ajout dynamique de la règle @ font-face dans IE 8 et moins

J'ajoute les règles @ font-face en utilisant la méthode stylesheet.addRule () d'IE. Cependant, le symbole @ est un caractère non autorisé pour l'argument «sélecteur» de cette méthode, de sorte que je reçois une erreur «argument invalide».

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

Existe-t-il une autre façon d'ajouter ces règles de façon dynamique?

J'ai essayé de définir la propriété innerHTML de l'élément de style, en définissant la propriété cssText de la propriété styleSheet et en ajoutant un nœud de texte à l'élément de style aussi (ce qui bloque IE).

D'autres méthodes à essayer?

La définition de la propriété cssText fonctionne, mais vous devez insérer l'élément de style dans le document avant d'ajouter la règle @ font-face au document. Par exemple…

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

Pour autant que je puisse le dire, il est parfaitement possible de définir d'autres types de règles CSS avant d'insérer l'élément de style dans la page, mais pas @ font-face.

Par exemple … ça fonctionne bien:

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

Mais cela bloque IE 8 et moins:

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