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和其他浏览器上，它看起来像这样：

我尝试将字体系列更改为例如衬线，试图在每个浏览器上都显示相同的图标，但这没有用。 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字符；所以你需要：

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