火狐浏览器中的<SELECT>标签是否不支持CSS字体族？

Question

以下 CSS 在我测试过的所有浏览器中都有效。它甚至还有一个选择器选项来处理 Firefox。

select,
option {
  font-family: "Lucida Console", Monaco, monospace;
}

<select>
  <option>PN-2345&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The first element&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hardware</option>
  <option>Pn-1332-CFG&nbsp;&nbsp;Second thing&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Powdercoat</option>
</select>

最新版本的Firefox不再正确应用字体家族样式。以前的Firefox版本和我测试过的其他主要浏览器都可以完全将字体家族设置应用到选择框和下拉菜单项中——现在，它只适用于选择框本身，而不适用于下拉菜单。

Firefox是否仍支持对下拉菜单进行字体家族更改？如果是，该如何操作？

- wedstrom

---

是的，我做了那件事-在这里它能运行。 - Johannes

@Johannes 谢谢你的信息！ - wedstrom

https://support.mozilla.org/en-US/questions/1141257 和 https://bugzilla.mozilla.org/show_bug.cgi?id=910022 - 这是真的！！ - wedstrom

这个错误在Firefox 61中仍然存在。我在Bugzilla上提交了此问题（https://bugzilla.mozilla.org/show_bug.cgi?id=1471238）。 - ConnorsFan

对我来说，它只显示了选择的样式，而没有为选项显示。截图：https://i.imgur.com/JR19hfB.pngWindows 10，Firefox 66.0.2 - Hovhannes Sargsyan

Answer 1

我进行了一些实验，显然只要字体在本地安装正确，<option>元素中的font-family将会正确呈现。这显然是无用的。

如果有人有任何反驳的信息，请告诉我们。

- Scorer

---

看起来你是正确的，只有在本地安装了字体才能显示它。你所能做的就是尽可能使字体堆栈更好，这样至少你会有一个不错的备用字体。 - J.T. Houtenbos

Answer 2

您可以使用以下代码在Firefox中设置和元素的字体： select, option { font: -moz-pull-down-menu; }

- cschaefer

---

我尝试了这个，但它做了我想要的相反的事情。我在Firefox中有一个下拉菜单，菜单使用了正确的字体，但是下拉选项却不同。但是现在我的样式表中的CSS font-family属性不仅未应用于options，而且也从整个菜单中移除了！ - mlibby

Answer 3

这个能用吗？如果你想的话可以使用这段代码 :)

var ff = document.getElementById('sel');

function font() {
  ff.style.fontFamily = "'" + ff.value + "', sans-serif";
}

select {
  font-family: 'Overpass', sans-serif;
}

option#diff {
  font-family: 'Ubuntu', sans-serif;
}

option#muli {
  font-family: 'Muli', sans-serif;
}

option#over {
  font-family: 'Overpass', sans-serif;
}

<link href="https://fonts.googleapis.com/css2?family=Muli:wght@300&family=Overpass:wght@300&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
<select id='sel' onchange='font()'>
  <option id='muli' value='Muli'>Muli yay</option>
  <option selected id='over' value='Overpass'>Overpass hooray</option>
  <option id='diff' value='Ubuntu'>Ubuntu is awesome</option>
</select>

- d x

---

不好意思，在Firefox中代码片段仍然出现相同的错误 =( - Scorer

Answer 4

我理解的是，Firefox 在某种程度上将选项的渲染委托给操作系统，因此只有安装在系统上的字体才能应用。您可以通过设置备用字体或至少通用字体族来缓解大多数情况，就像问题中的代码使用 monospace 一样。这就是我从 bugzilla评论 中的评论中得出的结论。

- Patrick Stephansen

Answer 5

-moz-font-family:"Lucida Console", Monaco, monospace;

- pankaj

---

请在您的回答中添加一些解释，以便其他人可以从中学习。 - Nico Haase