字体大小超过 256px 时，某些 Unicode 表情符号会被剪裁/扭曲

Question

显然表情符号和字体大小的某些组合会导致表情符号本身无法呈现或以 clipped/distorted 方式呈现。

但是它的文本阴影（如果设置）将正确呈现。

<div style = "display:flex; flex-direction:column; gap:32px">

<div style = "display:flex; flex-direction:row; gap:32px">

    <div style = "display:flex; align-items:center; justify-content:center; font-size:300px; text-shadow: 2px 6px 9px rgba(0,0,0,0.41);">
    
    </div>

    <div style = "display:flex; align-items:center; justify-content:center; width: font-size:256px; text-shadow: 2px 6px 9px rgba(0,0,0,0.41);">
    
    </div>

    <div style = "display:flex; align-items:center; justify-content:center; font-size:258px; text-shadow: 2px 6px 9px rgba(0,0,0,0.41);">
    
    </div>
    
</div>

<div style = "display:flex; flex-direction:row; gap:32px">

    <div style = "display:flex; align-items:center; justify-content:center; font-size:300px; text-shadow: 2px 6px 9px rgba(0,0,0,0.41);">
    
    </div>

    <div style = "display:flex; align-items:center; justify-content:center; font-size:257px; text-shadow: 2px 6px 9px rgba(0,0,0,0.41);">
    
    </div>

    <div style = "display:flex; align-items:center; justify-content:center; font-size:258px; text-shadow: 2px 6px 9px rgba(0,0,0,0.41);">
    
    </div>
    
</div>

在 Chromium/Chrome/Edge 99 上测试。这是一个已知的问题？有什么解决方法吗？

（字体大小限制为 2^8 像素有点可疑，但也许这只是巧合？）

截图 https://imgur.com/a/fJvrAGb

Answer 1

Chrome 字体开发者在这里，这听起来像 https://bugs.chromium.org/p/chromium/issues/detail?id=1280180 已在 Chrome M100 中修复。你能在 Chrome M100 中重新测试吗？

字体大小超过 256px 时，某些 Unicode 表情符号会被剪裁/扭曲

Some Unicode Emoji get clipped / distorted for Font-Size above 256px

html

css

unicode

emoji