Tự động thêm @ quy tắc phông chữ trong IE 8 và ít hơn

Question

Tôi đang thêm @ quy tắc phông chữ bằng cách sử dụng phương thức stylesheet.addRule() của IE. Tuy nhiên, biểu tượng @ là ký tự không được phép đối với đối số 'chọn' của phương thức đó để tôi nhận được lỗi 'đối số không hợp lệ'.

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

Có cách nào khác để tự động thêm các quy tắc này không?

Tôi đã thử đặt thuộc tính innerHTML của phần tử kiểu, đặt thuộc tính cssText của thuộc tính styleSheet và thêm một nút văn bản vào phần tử kiểu (cũng làm hỏng IE).

Bất kỳ phương pháp nào khác để thử?

Answer 1

Đặt thuộc tính cssText không hoạt động, nhưng bạn PHẢI chèn phần tử kiểu vào tài liệu trước khi thêm quy tắc @ phông mặt vào tài liệu. Ví dụ:

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

Theo tôi có thể hoàn toàn có thể đặt các loại quy tắc CSS khác trước khi chèn phần tử kiểu vào trang chứ không phải @ phông chữ.

Ví dụ ... này hoạt động tốt:

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

Nhưng điều này bị treo trình duyệt IE 8 và ít:

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