选择选项标记中的自定义字体

我已将各种自定义字体集成在FF中正常工作的标记中，但不适用于Web浏览器（如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.

来源

2013-04-30 matthewb

浏览器供应商密谋使表单控制难以风格化。如果您想要完全控制，请将其替换为其他类似的外观（如ol或ul）。 – reisio 2013-04-30 08:25:55

嘿谢谢@reisio，我不能使用UL LI结构，我必须放置这些东西。 – matthewb 2013-04-30 08:30:41

当然可以，matthewb。 – reisio 2013-04-30 08:54:16

-3

使用自定义的字体（即尚未在客户端计算机上）的唯一方法是使用@font-face到specyfy它，这意味着命名您的自定义字体（在这里， “Myfont”），并指向至少一个定义文件（这里，TrueType字体）：

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

从webkit website： “的WebKit现在支持CSS的@ font-face规则”

W3C的specs
的CSS3.info page（与specifit的Safari/Webkit的笔记）
的alistapart article

来源

2013-04-30 09:21:22 yPhil

'@ font-face'不是问题，'

你说得对，昆汀。再次，这个问题可能会误导新客户，他们认为字体已经在客户端（或者对于人体工程学和可访问性来说，造型网页表单并不危险）。 – yPhil 2013-04-30 09:28:07

您可以为使用@ font-face定义的特定字体的option创建CSS类。例如，如果u已经按照你的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; 
}

你的HTML代码应该是

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

注意：我还没有测试的代码，或许它应该工作，因为我有很久以前，在我记忆中的一项任务中这样做了。

来源

2013-04-30 12:16:47 Sridhar

选择选项标记中的自定义字体

回答

相关问题