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

Question

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

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

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

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

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

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

如果我访问其他网站，像这样Unicode Search website或者这个 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: "\2192";
    width: 0;
    display: inline-block;
    font-family: sans-serif;
}