Phông chữ tùy chỉnh trong thẻ tùy chọn chọn

Question

Tôi đã tích hợp nhiều phông chữ tùy chỉnh khác nhau trong các thẻ hoạt động tốt trong FF nhưng không hoạt động trong các trình duyệt web như (chrome & safari).

<select> 
<option value="" style="font-family: 'Averia Libre'!important;">I'm a custom font.</option> 
<option value="" style="font-family: 'cancun', cursive;">Hey me too!</option> 
<option value="" style="font-family: 'Averia Libre', cursive!important;">Averia Libre</option> 
</select> 

jsfiddle demo here.

Answer 1

Các chỉ cách sử dụng một phông chữ tùy chỉnh (ví dụ đó không phải là đã có trên máy của khách hàng) là specyfy nó bằng cách sử @font-face, có nghĩa là đặt tên phông chữ tùy chỉnh của bạn (Ở đây, "Myfont") và trỏ đến ít nhất một tệp định nghĩa (tại đây, TrueType):

@font-face { 
    font-family: "Myfont"; 
    src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) 
    format("truetype"); 
} 
h1 { font-family: "Myfont", sans-serif } 

Từ webkit website: "WebKit bây giờ hỗ trợ CSS @ quy tắc font-face"

• W3C specs
• Các CSS3.info page (với specifit ghi chú Safari/Webkit)
• Các alistapart article

Answer 2

Bạn có thể tạo các lớp CSS cho option sử dụng phông chữ cụ thể được xác định bằng cách sử dụng @ font-face. Ví dụ, nếu u đã sau @ font-face định nghĩa trong CSS của bạn

@font-face 
{ 
font-family: "MyFont1"; 
src: url('Averia_Libre.ttf'), 
    url('Averia_Libre.eot'); /* IE9 */ 
} 

@font-face { 
    font-family: "MyFont2"; 
    src: url('cancun.ttf'); 
} 

option.style1{ 
font-family: MyFont1; 
} 
option.style2{ 
font-family: MyFont2; 
} 

mã HTML của bạn nên được

<select> 
<option value="" class="style1">I'm a custom font.</option> 
<option value="" class="style2">Hey me too!</option> 
</select> 

Lưu ý tôi havent kiểm tra mã, có lẽ nó nên làm việc, bởi vì tôi có thực hiện như thế này từ lâu trong một nhiệm vụ của tôi, tôi nhớ.