चुनिंदा विकल्प टैग में कस्टम फोंट

Question

मैंने एफएफ में ठीक काम करने वाले टैग में विभिन्न कस्टम फोंट एकीकृत किए हैं लेकिन वेब-किट ब्राउज़र जैसे काम नहीं कर रहे हैं (क्रोम सफारी)।

<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

केवल तरह से (यानी कि ग्राहक की मशीन पर पहले से ही नहीं है) एक कस्टम फ़ॉन्ट का उपयोग करने के @font-face का उपयोग कर इसे specyfy को, कि अपने कस्टम फ़ॉन्ट (नामकरण का मतलब है यहाँ, "Myfont"), और बात करने के लिए कम से कम एक परिभाषा फ़ाइल (यहाँ, ट्रू टाइप):

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

से:

• W3c specs
• CSS3.info page (specifit साथ सफारी/वेबकिट नोट्स)
• alistapart "वेबकिट अब सीएसएस @ फॉन्ट-फेस नियम का समर्थन करता है" article

Answer 2

आप option के लिए सीएसएस कक्षाएं बना सकते हैं जो @ फ़ॉन्ट-फेस का उपयोग करके परिभाषित विशिष्ट फ़ॉन्ट का उपयोग करते हैं। उदाहरण के लिए, यदि u निम्नलिखित है @ फॉन्ट-फेस अपने सीएसएस में परिभाषित

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

आपका एचटीएमएल कोड होना चाहिए

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

नोट मैं havent कोड परीक्षण किया है, शायद यह काम करना चाहिए, क्योंकि मेरे पास है मुझे अपने काम में से एक में बहुत पहले ऐसा याद आया।