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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 778 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

错误图片

浏览器

电脑

Emoji

Chrome

23 条回复 • 2022-10-09 18:57:50 +08:00

newHunter

2022-10-08 15:58:57 +08:00

我的 win7 系统只显示黑框

HugoChao

2022-10-08 16:04:18 +08:00

部分系统的 emoji 支持很差

yaphets666

2022-10-08 16:06:20 +08:00

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

christin

2022-10-08 16:09:45 +08:00 via iPhone

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

christin

2022-10-08 16:09:59 +08:00 via iPhone

@yaphets666 感谢我去试一下

rain0002009

2022-10-08 16:34:32 +08:00

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

youngteam99

2022-10-08 17:03:25 +08:00

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

eason1874

2022-10-08 17:06:40 +08:00

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

christin

2022-10-08 17:23:18 +08:00

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

Projection

2022-10-08 17:33:16 +08:00

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

这才是 emoji：🥳💀👍

christin

2022-10-08 17:43:49 +08:00

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

hokori

2022-10-08 18:08:30 +08:00

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

Projection

2022-10-08 18:15:12 +08:00

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

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

renmu123

2022-10-08 18:16:15 +08:00

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

christin

2022-10-08 19:23:41 +08:00 via iPhone

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

Projection

2022-10-08 19:46:08 +08:00

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

Projection

2022-10-08 19:52:25 +08:00

@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

2022-10-08 21:05:02 +08:00 via iPhone

@Projection 非常感谢我研究一下

Kamiyu0087

2022-10-09 13:35:18 +08:00

ubuntu 22.04 显示正常

christin

2022-10-09 15:10:21 +08:00

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

Cu635

2022-10-09 15:41:04 +08:00

“🫠 和 🫤 在我的电脑上是正常的”

在我这里，linux mint 21 ，firefox 105.0.2 下面显示没问题。而在 win10 下面，firefox 106.0b9 原本没法显示，安装了 noto emoji 字体之后，没有改动 firefox 的设置，刷新一下就能显示了。
不过 linux 是早就安装好了 noto emoji 系列字体，而 windows 是 lz 发帖之前没安装，测试 lz 的帖子的时候才安装的。

christin

2022-10-09 15:45:59 +08:00

@Cu635 note emoji 显示是黑白的吗？
我在网上找到这个下载地址，https://fonts.google.com/noto/specimen/Noto+Emoji ，是这个吗？

christin

2022-10-09 18:57:50 +08:00

@rain0002009
@youngteam99
@Projection
不用了，我已经自己安装虚拟机拿出来了，麻烦了。