CSS ::after - content 属性 在每个浏览器上以相同的样式显示 unicode 图标 (2192)

Question

我正在构建一个网站，我想在包含子菜单的菜单项后面显示一个图标。默认情况下不显示子菜单，但在单击时显示（使用 Javascript 完成）。我添加了这样的箭头：

.menu-item-has-children > a::after {
    content: "92";
    width: 0px;
    display: inline-block;
    font-family: serif;
}

我注意到在 Firefox 上它看起来像这样：

但在 Safari、Edge 和其他浏览器上它看起来像这样：

我尝试将字体系列更改为例如serif，试图在每个浏览器上显示相同的图标，但那没有用。 Firefox 始终显示正确的图标，而 Safari、Edge 等显示不同的图标。如果我更改字体，Safari 和 Edge 也会更改图标的样式，而 Firefox 会保留并始终显示相同的图标。

如何让每个浏览器都显示相同的图标，就像 Firefox 一样？

如果我访问其他网站，例如 Unicode Search website or this Unicode Character entities，它会在每个浏览器中显示相同的图标，就像我想要的那样。

那么如何显示图标的版本，就像在 Firefox 和每个浏览器的网站上显示的一样？

Answer 1

在the unicode website上使用的字体系列实际上是sans-serif；不是 serif.

在该网站上使用 serif 更改显示的箭头（即使其不是您想要的）。

因此，看来font-family: serif;没有正确显示这些unicode字符；所以你应该用 sans-serif 代替：

.menu-item-has-children > a::after {
    content: "92";
    width: 0;
    display: inline-block;
    font-family: sans-serif;
}