7

我在标签中集成了各种自定义字体，在 FF 中运行良好，但在 (chrome & safari) 等 web-kit 浏览器中无法运行。

<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 演示在这里。

4

2 回答 2

0

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>

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

于 2013-04-30T12:16:47.450 回答
-3

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

@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 规则”

于 2013-04-30T09:21:22.480 回答