Question

我不知道这是否可能，如果没有，如果有人可以抛弃可选的想法，但我试图在选择中显示不同字体的下拉列表（特别是来自Google字体目录的字体）标签。在下拉列表中，我试图通过使用它代表的字体为每个选项设置样式来显示预览

<option name="Tangerine" style="font-family:'Tangerine', verdana;">Tangerine</option>

但这似乎不起作用。任何线索为什么或如何解决它？

Answer 1

您应该将每个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>

Answer 2

您无法设置<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>&nbsp;</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>&nbsp;</div>
<h1>List</h2>
<ul>
    <li>Tangerine</li>
    <li>Tahoma</li>
    <li>Times New Roman</li>
</ul>

Answer 3

也许你可以使用javascript？你能试试吗？

<script>
myObj = document.getElementById("tahoma");
myObj.style.font = "Tahoma";
myObj.style.color = "red";

// Change anything else that you like!
</script>

<option id="tahoma .....>

Answer 4

您可以像这样使用

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

Answer 5

我使用了一种hackish风格的方法来做到这一点。

因为我需要设置select标签的样式并希望自定义更多内容，所以我使用了JQuery的Stylish Select插件，并将font-family css属性附加到父元素（这是一个列表标记）。

使用的代码很少，并且与浏览器兼容。

Answer 6

将字体名称赋予选项值。然后你可以用jquery设置它们。

以下是一个例子：

您可以像这样轻松添加新字体：

main()

＆＃13;

<option value="myFontName">My Font Name</option>

＆＃13;

$("#selectfont").each(function(){
  $(this).children("option").each(function(){
    $(this).css("fontFamily",this.value);
  });
});

＆＃13;

更改选择标记中单独选项的css font-family

6 个答案: