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

前端之家收集整理的这篇文章主要介绍了html – 选择选项标签中的自定义字体前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > Change css font-family for separate options in select tag7个
> How to change font-family of drop down’s list item?6个
我已经在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.

解决方法

您可以为使用@ 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>

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

猜你在找的HTML相关文章