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

Question

我已经在FF中正常工作的标签中集成了各种自定义字体,但却没有在(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在这里.

Answer 1

使用自定义字体（即尚未在客户端计算机上）的唯一方法是使用 来指定它，这@font-face意味着命名您的自定义字体（此处为“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 网站：“WebKit 现在支持 CSS @font-face 规则”

• W3c规范
• CSS3.info页面（带有特定的 Safari / Webkit 注释）
• 阿利斯塔帕特 文章