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

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

  •  
  •   christin · 354 天前 · 1270 次点击
    这是一个创建于 354 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    错误图片

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

    这才是 emoji:🥳💀👍
    christin
        11
    christin  
    OP
       354 天前
    @Projection 这是 emoji 啊,苹果系统输入法自带的 emoji 。
    https://emojipedia.org/melting-face/
    hokori
        12
    hokori  
       354 天前
    @christin ubuntu 表示,打开网页里面显示的是方框
    Projection
        13
    Projection  
       354 天前
    @christin 我搞错了,只看你的图了,没有去搜 🫠 和 🫤。这两个 emoji 在 Windows 11 21H2 上也不能显示(看 Emojipedia 22H2 已经支持了),Unicode 14 还比较新( Unicode 15 上个月发布),系统字体不更新系统只能原地踏步。

    要么叫别人更新系统,要么安装新的字体。要么使用 Twemoji 等类似的方式将这些 emoji 字符替换成 SVG 图形,Notion 就是这么做的。
    renmu123
        14
    renmu123  
       354 天前
    苹果有自带的 emoji 字体包,其他系统没有就变成方框了。
    可能你的 Mac 版本比较新
    christin
        15
    christin  
    OP
       354 天前 via iPhone
    @Projection 安装新的字体要安装哪个呢?
    替换 Twemoji 有教程吗?
    Projection
        16
    Projection  
       354 天前
    @christin twitter/twemoji: Emoji for everyone.
    https://github.com/twitter/twemoji#usage
    Projection
        17
    Projection  
       354 天前   ❤️ 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
       354 天前 via iPhone
    @Projection 非常感谢 我研究一下
    Kamiyu0087
        19
    Kamiyu0087  
       353 天前
    ubuntu 22.04 显示正常
    christin
        20
    christin  
    OP
       353 天前
    @rain0002009
    @youngteam99
    @Projection
    麻烦问下你们能把 22h2 里面的 Segoe UI Emoji 字体拷给我一份吗?非常感谢
    Cu635
        21
    Cu635  
       353 天前
    “🫠 和 🫤 在我的电脑上是正常的”

    在我这里,linux mint 21 ,firefox 105.0.2 下面显示没问题。而在 win10 下面,firefox 106.0b9 原本没法显示,安装了 noto emoji 字体之后,没有改动 firefox 的设置,刷新一下就能显示了。
    不过 linux 是早就安装好了 noto emoji 系列字体,而 windows 是 lz 发帖之前没安装,测试 lz 的帖子的时候才安装的。
    christin
        22
    christin  
    OP
       353 天前
    @Cu635 note emoji 显示是黑白的吗?
    我在网上找到这个下载地址,https://fonts.google.com/noto/specimen/Noto+Emoji ,是这个吗?
    christin
        23
    christin  
    OP
       353 天前
    @rain0002009
    @youngteam99
    @Projection
    不用了,我已经自己安装虚拟机拿出来了,麻烦了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1129 人在线   最高记录 6067   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 18:22 · PVG 02:22 · LAX 11:22 · JFK 14:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.