Firefox 中 <SELECT> 的 CSS Font-Family 支持下降了吗？

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 是否仍支持对下拉菜单的字体系列更改？如果有，怎么做？

Answer 1

我的理解是，Firefox 在某种程度上将选项的渲染委托给了操作系统，因此只能应用系统上安装的字体。在大多数情况下，您可以通过设置后备字体或至少一个通用系列来缓解这种情况，就像问题中的代码在规则末尾使用 , monospace 所做的那样。这就是我对this comment from bugzilla 的解释。

Answer 2

我做了一些实验，显然只要字体安装在本地，字体系列就会在<option> 元素中正确呈现。这显然是没有用的。

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

Answer 3

您可以使用以下方法为 Firefox 中的 select 和 option 元素设置字体：

select, option {
  font: -moz-pull-down-menu;
}

Answer 4

这行得通吗？如果您愿意，可以使用此代码:)

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>

Answer 5

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