HTML select 元素 - 所选元素使用选项字体

Question

我正在网页上创建一个字体下拉列表。我用它代表的字体设置了每个选项元素的样式:-

<option value="Arial, Helvetica, sans-serif" style="font-family: Arial,Helvetica,sans-serif;">Arial</option>

当我展开下拉菜单时，它看起来是正确的，但是当我选择一个元素时，下拉菜单不使用所选选项的字体。有没有办法让它在选择选项时更新字体？

jsFiddle - http://jsfiddle.net/bq2d9/

Answer 1

尝试添加:

onChange="this.style.fontFamily=this.value;"

http://jsfiddle.net/bq2d9/5/

请注意，下拉菜单中的字体在 Firefox 中显示正确，但在 Chrome 中显示不正确。但是，选择后，两者都会以正确的字体显示文本。

Chrome 不支持在每个选择选项中使用不同的字体。

---

要获得显示每个选项字体的跨浏览器字体选择器，您必须获得一个插件。

看看jQuery插件，数量很多。目前尚不清楚它们中哪些支持个性化样式。我可以找到一些可以单独设置样式的选项，但是，它们看起来也很难看。对于那些更好看的，有时很难知道它们是否可以单独设计。

我能找到的最好的是 jQuery-Font-Chooser - https://github.com/CD1212/jQuery-Font-Chooser .看起来不错，响应时间也还可以。

否则，对于其他插件，您可以搜索，例如“jquery select box”或“jquery font selector”。