我正在尝试在 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>🌝</p>
<p>☀</p>
</body>
</html>
最佳答案
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 :(
在我的 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?
关于html - 大表情符号在 Chrome 和移动浏览器上被截断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52324767/