Question

我已经将各种自定义字体集成到FF中运行良好的标签中，但无法在网络套件浏览器中工作，例如（chrome＆amp; 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

您可以为option创建使用@ font-face定义的特定字体的CSS类。例如，如果您在CSS中定义了@ font-face

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

注意我还没有对代码进行测试，可能它应该可以工作，因为我很久以前在我记得的任务中做过这样的事情。

Answer 2

使用自定义字体的唯一方式（即客户端机器上尚未使用的方式）是使用@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 website： “WebKit现在支持CSS @ font-face规则”

W3c specs
CSS3.info page（带有特定的Safari / Webkit说明）
alistapart article

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

2 个答案: