html - HTML 选择元素 - 所选项目使用选项字体

Question

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

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

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

score 2 · Accepted Answer

试试这个：

试试这个来改变下拉菜单中的样式：

score 2 · Accepted Answer

尝试添加：

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

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

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

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

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

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

否则，对于其他插件，您可以搜索，例如“jquery 选择框”或“jquery 字体选择器”。

score 0 · Accepted Answer

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

3 回答 3