Niestandardowe czcionki w wybranej opcji tag

Question

Mam zintegrowane różne niestandardowe czcionki w tagach działa dobrze w FF, ale nie działa w przeglądarkach Web Kit, takich jak (Safari chrome &).

<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

tylko sposobem korzystania z niestandardową czcionkę (czyli że nie jest już na komputerze klienta) jest specyfy go za pomocą @font-face, czyli nazywanie czcionkę niestandardową (tutaj „myFont”) i wskaż co najmniej jeden plik definicji (tu TrueType):

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

z webkit website: "WebKit obsługuje CSS @ font-face zasady"

• W3C specs
• The CSS3.info page (z specifit notatki Safari/WebKit)
• alistapart article

Answer 2

Można utworzyć klasy CSS dla option, które używają określonej czcionki zdefiniowanej przy użyciu @ twarz-czcionki. Na przykład, jeśli u mają następujące @ font-face zdefiniowane w CSS

@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; 
} 

kod HTML powinien być

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

Uwaga I miałaś przetestowany kod, prawdopodobnie powinno działać, bo mam zrobiłem to tak dawno temu, w jednym z moich zadań pamiętam.