V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
christin
V2EX  ›  问与答

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

  •  
  •   christin · 2022-10-08 15:57:36 +08:00 · 1634 次点击
    这是一个创建于 538 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    错误图片

    23 条回复    2022-10-09 18:57:50 +08:00
    newHunter
        1
    newHunter  
       2022-10-08 15:58:57 +08:00
    我的 win7 系统 只显示黑框
    HugoChao
        2
    HugoChao  
       2022-10-08 16:04:18 +08:00
    部分系统的 emoji 支持很差
    yaphets666
        3
    yaphets666  
       2022-10-08 16:06:20 +08:00
    你的字体图标是怎么弄的,保存到项目里的,还是链接到阿里那个字体图标库的,有些电脑因为 dns 解析的问题,无法访问阿里那个字体图标库,
    christin
        4
    christin  
    OP
       2022-10-08 16:09:45 +08:00 via iPhone
    @newHunter
    @HugoChao 我和同事都是 Mac 我的显示他们的不显示
    christin
        5
    christin  
    OP
       2022-10-08 16:09:59 +08:00 via iPhone
    @yaphets666 感谢 我去试一下
    rain0002009
        6
    rain0002009  
       2022-10-08 16:34:32 +08:00
    好家伙 windows 11 22H2 才能显示这玩意
    youngteam99
        7
    youngteam99  
       2022-10-08 17:03:25 +08:00
    Windows10 21H2 显示框框,Windows11 22H2 显示正常
    eason1874
        8
    eason1874  
       2022-10-08 17:06:40 +08:00
    就是缺字体,要么自己用 CSS 加载字体,要么转换成图片
    christin
        9
    christin  
    OP
       2022-10-08 17:23:18 +08:00
    @eason1874 我尝试加了思源宋体,等会发个代码看一下。
    Projection
        10
    Projection  
       2022-10-08 17:33:16 +08:00
    这不是 emoji 啊,你这是字体图标。
    字体图标需要设置成特定字体配合特定编码的字符才能显示,用 DevTools 检查一下 Rendered Fonts 。

    这才是 emoji:🥳💀👍
    christin
        11
    christin  
    OP
       2022-10-08 17:43:49 +08:00
    @Projection 这是 emoji 啊,苹果系统输入法自带的 emoji 。
    https://emojipedia.org/melting-face/
    hokori
        12
    hokori  
       2022-10-08 18:08:30 +08:00
    @christin ubuntu 表示,打开网页里面显示的是方框
    Projection
        13
    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
        14
    renmu123  
       2022-10-08 18:16:15 +08:00
    苹果有自带的 emoji 字体包,其他系统没有就变成方框了。
    可能你的 Mac 版本比较新
    christin
        15
    christin  
    OP
       2022-10-08 19:23:41 +08:00 via iPhone
    @Projection 安装新的字体要安装哪个呢?
    替换 Twemoji 有教程吗?
    Projection
        16
    Projection  
       2022-10-08 19:46:08 +08:00
    @christin twitter/twemoji: Emoji for everyone.
    https://github.com/twitter/twemoji#usage
    Projection
        17
    Projection  
       2022-10-08 19:52:25 +08:00   ❤️ 1
    @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
        18
    christin  
    OP
       2022-10-08 21:05:02 +08:00 via iPhone
    @Projection 非常感谢 我研究一下
    Kamiyu0087
        19
    Kamiyu0087  
       2022-10-09 13:35:18 +08:00
    ubuntu 22.04 显示正常
    christin
        20
    christin  
    OP
       2022-10-09 15:10:21 +08:00
    @rain0002009
    @youngteam99
    @Projection
    麻烦问下你们能把 22h2 里面的 Segoe UI Emoji 字体拷给我一份吗?非常感谢
    Cu635
        21
    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
        22
    christin  
    OP
       2022-10-09 15:45:59 +08:00
    @Cu635 note emoji 显示是黑白的吗?
    我在网上找到这个下载地址,https://fonts.google.com/noto/specimen/Noto+Emoji ,是这个吗?
    christin
        23
    christin  
    OP
       2022-10-09 18:57:50 +08:00
    @rain0002009
    @youngteam99
    @Projection
    不用了,我已经自己安装虚拟机拿出来了,麻烦了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2795 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 11:53 · PVG 19:53 · LAX 04:53 · JFK 07:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.