Chrome和移动浏览器上的大表情符号被切断 [英] Large emoji is cut off on chrome and mobile browsers

查看:0
本文介绍了Chrome和移动浏览器上的大表情符号被切断的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试在HTML或CSS中显示一些带有Unicode的大型表情符号。
然而,在Chrome中,一些表情符号的下半部分被切断,而另一些表情符号显示得很好。
它也无法在Android上的移动Firefox上渲染。

表情符号示例:☀

不起作用的表情符号示例:🌝

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    body {
      margin: 0;
      background-color: #fff;
    }
    p {
      font-size: 20em;
      margin: 0;
    }
  </style>
</head>
<body>
  <p>&#x1F31D;</p>
  <p>&#x2600;</p>
</body>
</html>

minimal codepen example:
谢谢。

推荐答案

Chromium错误跟踪器中报告了错误-Color glyphs have a 256pt limit

我们缓存颜色字形的正确版本(就像我们对Alpha所做的那样 掩码),但在这两种情况下,我们都有缓存的大小限制(即 256磅)。

在非彩色字形的情况下,我们使用按路径绘制 大号的。我们对颜色字形没有这样的后备选项:(

在我的Windows 10系统Chrome版本69.0.3497.92(正式版本)(64位)中,216px以上的font-size图标有颜色中断。

相关问题:https://bugs.chromium.org/p/chromium/issues/detail?id=625191

类似的销售订单问题:Why do emoji not render above a certain size in Chrome?

这篇关于Chrome和移动浏览器上的大表情符号被切断的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆