发布于 2026-01-06 4 阅读
0

🤷‍♂️ Chrome 浏览器刚刚把标题里的表情符号改成轮廓线了?🤷‍♂️ 我有个办法可以修复你的网站!💪

🤷‍♂️ Chrome 浏览器刚刚把标题里的表情符号改成轮廓线了?🤷‍♂️ 我有个办法可以修复你的网站!💪

最近我注意到 Chrome 浏览器出现了一些变化,如果表情符号位于标题中,则所有表情符号现在都只显示轮廓(并且颜色与文本相同)。

我不确定为什么会发生这种情况,我似乎找不到任何相关信息,而且这肯定不是为了提高可访问性(如果他们是这么想的的话)!

无论如何,如果您还没看过,这里快速看一下他们做了什么,或者您也可以使用其他浏览器!

左侧是谷歌浏览器,使用单一颜色的简化表情符号;右侧是火狐浏览器,使用彩色表情符号。

表情符号似乎也会根据文本颜色进行调整,这是一件好事(前提是文本颜色对比度足够高!)。

Chrome 浏览器中表情符号的轮廓颜色与文本颜色相同。

变通方法

如果将设置调得font-weight非常低,Chrome 浏览器就会显示原始表情符号。

如果文本粗细较细,Chrome 浏览器中的表情符号就能恢复正常显示。

所以,如果你想让正常的表情符号在你的网站上显示,一个快速的解决方法是用<span>一个高度很低的标签包裹表情符号font-weight,这样一切看起来就会恢复正常。

例子

示例截图

如果您还不明白我的意思,这里附上一张在 Windows 系统上使用 Chrome 浏览器打开上述示例的截图:

内容与上述 Codepen 相同

你怎么认为?

我挺喜欢新的只有轮廓的表情符号,但它们并非在所有地方都能正常显示。

你们对此有何看法?有人能找到解释此事的变更日志条目吗?

更新

感谢@lewisisisisisisiisiss,我现在可以报告说这似乎是一个 bug,所以预计很快就会得到修复(从讨论来看应该很快就会修复)。

https://bugs.chromium.org/p/chromium/issues/detail?id=1266022

文章来源:https://dev.to/grahamthedev/chrome-changed-emojis-in-headings-a-workaround-if-you-want-normal-emojis-again-4n4o