我不知道这是否可能，如果没有，是否有人可以抛出可选的想法，但我试图在选择中显示不同字体的下拉列表（特别是来自 Google 字体目录的字体）标签。在下拉菜单中，我试图通过使用它所代表的字体为每个选项设置样式来显示预览
<option name="Tangerine" style="font-family:'Tangerine', verdana;">Tangerine</option>
不过，这似乎不起作用。任何线索为什么或如何解决它？
【问题讨论】：
font-size 设置 - 但在绑定到 @ 时会采用 font-size 987654324@ 自己。
标签： html css fonts google-webfonts
您应该将每个 option 标记包装在一个 optgroup 标记中，然后将其设置为：
<select>
<optgroup style="font-family:arial">
<option>Arial</option>
</optgroup>
<optgroup style="font-family:verdana">
<option>veranda</option>
</optgroup>
<optgroup style="font-family:other">
<option>other</option>
</optgroup>
</select>【讨论】：
您无法设置<option> 标签的字体，但您可以创建具有特定样式的列表（如您所料）
这是我一直在尝试的一切：
$("select.js option:eq(0), ul li:eq(0)").css("fontFamily", "tangerine");
$("select.js option:eq(1), ul li:eq(1)").css("fontFamily", "tahoma");
$("select.js option:eq(2), ul li:eq(2)").css("fontFamily", "times new roman");h1 {
font-size: 1.2em;
margin-top: 10px;
color: #777;
}
.tangerine {
font-family: tangerine;
}
.tahoma {
font-family: tahoma;
}
.timesnewroman {
font-family: times new roman;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<h1>Set with jQuery</h2>
<select id="js">
<option>Tangerine</option>
<option>Tahoma</option>
<option>Times New Roman</option>
</select>
<div> </div>
<h1>Set with CSS</h2>
<select id="css">
<option class="tangerine">Tangerine</option>
<option class="tahoma">Tahoma</option>
<option class="timesnewroman">Times New Roman</option>
</select>
<div> </div>
<h1>List</h2>
<ul>
<li>Tangerine</li>
<li>Tahoma</li>
<li>Times New Roman</li>
</ul>【讨论】：
也许你可以使用javascript？你可以试试这个吗？
<script>
myObj = document.getElementById("tahoma");
myObj.style.font = "Tahoma";
myObj.style.color = "red";
// Change anything else that you like!
</script>
<option id="tahoma .....>
【讨论】：
font-family
你可以像这样简单地使用
<select id='lstFonts' class='form-control'>
<option style="font-family:Arial" value="Arial">Arial</option>
<option style="font-family:Verdana" value="Verdana">Arial</option>
</select>
【讨论】：
将字体名称赋予选项值。然后你可以用 jquery 来设置它们。
这是一个例子：
您可以像这样轻松添加新字体：
<option value="myFontName">My Font Name</option>
$("#selectfont").each(function(){
$(this).children("option").each(function(){
$(this).css("fontFamily",this.value);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<select id="selectfont">
<option value="tangerine">Tangerine</option>
<option value="tahoma">Tahoma</option>
<option value="times new roman">Times New Roman</option>
</select>【讨论】：
我使用了一种 hackish 风格的方法。
因为我需要设置 select 标签的样式并且想要自定义更多的东西，所以我使用了 jQuery 的 Stylish Select 插件并将 font-family css 属性附加到父元素（这是一个列表标签）。
这需要很少的代码并且是跨浏览器兼容的。
【讨论】：
上面提到的所有选项在 OSX Safari 上都没有正确显示。我设法通过使用引导程序使事情正确：
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>font test</title>
<meta name="generator" content="BBEdit 10.5" />
<link rel="stylesheet" type="text/css" href="yourpaththere/css/bootstrap.min.css" async />
</head>
<body>
<style>
@font-face {font-family: edwardian;src:local("edwardian"),url('yourpathhere/font/edwardian.TTF');font-weight: normal;}
.edwardian{font-family: edwardian; font-size: 30px;}
.arial{font-family: arial;}
.times{font-family: times;}
.verdana{font-family: verdana;}
.helvetica{font-family: helvetica;}
</style>
<div id="fontdropdown1" class="dropdown" style="width: 300px;">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Kies een lettertype
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" class="arial">Arial</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" class="times">Times</a></li>
<li role="presentation"><a role="menuitem" class="verdana">Verdana</a></li>
<li role="presentation"><a role="menuitem" class="helvetica">Helvetica</a></li>
<li role="presentation"><a role="menuitem" class="edwardian">Edwardian</a></li>
</ul>
</div>
<!-- test font dropdown -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="yourpathhere/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="yourpathhere/js/bootstrap.js"></script>
</body>
</html>
【讨论】：