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

Question

我正在尝试在 HTML 或 CSS 中显示一些带有 unicode 的大型表情符号。
不过在Chrome中，有的emoji的下半部分被截掉了，有的还可以正常显示。
它也无法在 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:
谢谢

Answer 1

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

We cache the "correct" version of color glyphs (as we do for alpha masks), but in both cases we have a size limit for the cache (i.e. 256pt).

In the case of non-color glyphs, we fall back on draw-as-path for larger sizes. We don't have such a fallback for color glyphs :(

在我的Windows10系统Chrome版本69.0.3497.92（正式版）（64位），font-size216px以上，图标颜色有断线。

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

类似的 SO 问题：

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

Large emoji is cut off on chrome and mobile browsers

html

css

unicode

icons

emoji