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

【问题标题】：CSS ::after - content property display unicode icon (2192) with the same styling on every browserCSS ::after - 内容属性在每个浏览器上显示具有相同样式的 unicode 图标 (2192)
【发布时间】：2020-06-06 13:11:11
【问题描述】：

我正在建立一个网站，如果其中包含子菜单，我想在菜单项后面显示一个图标。默认情况下不显示子菜单，而是在单击时显示（使用 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 和每个浏览器的网站上一样显示图标的版本？

【问题讨论】：

@Martin 谢谢！！这样做。如果您将其作为答案提交，我会将其标记为正确。
太好了。值得检查Browser Inspector 看看发生了什么，当这些事情发生时:-)
嗯，我确实使用了浏览器检查器，但只是为了尝试新事物，而不是查看网站上的设置；-) 下次我会确保先这样做。跨度>
你也知道为什么 Firefox 不受 font-family 属性的影响，但总是显示正确的吗？或者这就是 Firefox 的“现状”？
我不知道，我在 Unicode 网站上的 Firefox 中的 Inspector 上关闭并打开了不同的字体系列，这产生了影响，所以....那里没有任何线索，抱歉跨度>

标签： css unicode

【解决方案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;
}

【讨论】：