CSS 3D旋转文本严重锯齿问题求解

3D旋转后的文本出现严重锯齿，且文本越靠近背景，锯齿现象越明显。在macOS系统的Chrome、Firefox、Safari浏览器中均存在此问题（截图显示文本边缘锯齿严重）。

已尝试以下方案，但均未得到理想效果：

• 调整-webkit-font-smoothing和text-rendering的不同取值
• 添加translate3d(0,0,0)触发硬件加速
• 使用filter: blur可掩盖问题，但会损失文本清晰度

想请教：这是受限于显示像素的必然问题，还是存在可行的解决办法？

示例代码 #

HTML

<div>
  <h1>🤗 Hello World!</h1>
</div>

CSS

body {
  background: black;
  text-align: center;
}

div {
  perspective: 1000px;
}

h1 {
  color: white;
  font-weight: 300;
  font-size: 6vw;
  transform: rotate3d(1, -0.4, -0.4, 250deg);
}

内容的提问来源于stack exchange，提问作者panepeter