Question

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

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

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

Answer 1

试试这个：

尝试此操作以更改下拉列表中的样式：

Answer 2

尝试添加：

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

请注意，下拉列表中的字体在Firefox中正常显示，但在Chrome中则无法显示。但是，选择后，两者都将以正确的字体显示文本。

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

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

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

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

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

Answer 3

在这种情况下，您需要一些每个浏览器可能不支持的自定义，您将遇到类似您提到的问题。所以我当然建议你使用完全定制的组合框。一个jquery可能对你有好处。