Question

我正在尝试用HTML或CSS显示一些带有unicode的大型表情符号。
但是，在Chrome中，某些表情符号的下部被切除，而其他表情符号则显示得很好。
它也无法在Android上的移动Firefox中呈现。

工作表情符号示例：Example

无效表情符号示例：

<!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:
谢谢。

Answer 1

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

我们缓存颜色字形的“正确”版本（就像我们对alpha所做的那样   遮罩），但在两种情况下，我们都有缓存的大小限制（即   256pt）。

在非彩色字形的情况下，我们回退到draw-as-path   更大的尺寸。我们没有颜色字形的备用：（

在我的Windows 10系统Chrome版本69.0.3497.92（正式版本）（64位）中，font-size大于216px，带有颜色的图标中断。

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

类似的问题：Why do emoji not render above a certain size in Chrome?

大型表情符号在chrome和移动浏览器上被切断

1 个答案: