前端浏览器部分 emoji 不显示问题如何解决？

[christin]

🫠 和 🫤 在我的电脑上是正常的，同一个网页，其他人的电脑打开都是黑框。
如下图，麻烦问下各位大佬要怎么解决？是电脑缺字体吗还是浏览器版本问题？
用的都是 Chrome 最新版。

[newHunter]

我的 win7 系统 只显示黑框

[HugoChao]

部分系统的 emoji 支持很差

[yaphets666]

你的字体图标是怎么弄的，保存到项目里的，还是链接到阿里那个字体图标库的，有些电脑因为 dns 解析的问题，无法访问阿里那个字体图标库，

[christin]

@newHunter
@HugoChao 我和同事都是 Mac 我的显示他们的不显示

[christin]

@yaphets666 感谢 我去试一下

[rain0002009]

好家伙 windows 11 22H2 才能显示这玩意

[youngteam99]

Windows10 21H2 显示框框，Windows11 22H2 显示正常

[eason1874]

就是缺字体，要么自己用 CSS 加载字体，要么转换成图片

[christin]

@eason1874 我尝试加了思源宋体，等会发个代码看一下。

[Projection]

这不是 emoji 啊，你这是字体图标。
字体图标需要设置成特定字体配合特定编码的字符才能显示，用 DevTools 检查一下 Rendered Fonts 。

这才是 emoji：🥳💀👍

[christin]

@Projection 这是 emoji 啊，苹果系统输入法自带的 emoji 。
https://emojipedia.org/melting-face/

[hokori]

@christin ubuntu 表示，打开网页里面显示的是方框

[Projection]

@christin 我搞错了，只看你的图了，没有去搜 🫠 和 🫤。这两个 emoji 在 Windows 11 21H2 上也不能显示（看 Emojipedia 22H2 已经支持了），Unicode 14 还比较新（ Unicode 15 上个月发布），系统字体不更新系统只能原地踏步。

要么叫别人更新系统，要么安装新的字体。要么使用 Twemoji 等类似的方式将这些 emoji 字符替换成 SVG 图形，Notion 就是这么做的。

[renmu123]

苹果有自带的 emoji 字体包，其他系统没有就变成方框了。
可能你的 Mac 版本比较新

[christin]

@Projection 安装新的字体要安装哪个呢？
替换 Twemoji 有教程吗？

[Projection]

@christin twitter/twemoji: Emoji for everyone.
https://github.com/twitter/twemoji#usage

[Projection]

@christin 安装新字体就是把你本机的 Apple Color Emoji.ttc 拷贝到其他 Mac 上安装。如果是 Windows 的话就是把最新版 Windows 11 的 Segoe UI Emoji 安装到其他人的电脑上。中间替换可能会存在一些问题，这个链接能帮到你： https://github.com/joypixels/emojione/blob/master/extras/fonts/README.md#apple-font

另外不知道现在有没有什么 Web Font 是支持的 Emoji 的，或许这一些一种办法。不考虑版权问题的话，把 Segoe UI Emoji 放到 Web 上也是一个办法（前提是系统和浏览器版本足够高，能支持字体中的某些特性）

[christin]

@Projection 非常感谢 我研究一下

[Kamiyu0087]

ubuntu 22.04 显示正常

[christin]

@rain0002009
@youngteam99
@Projection
麻烦问下你们能把 22h2 里面的 Segoe UI Emoji 字体拷给我一份吗？非常感谢