safari - Safari 中 3d 转换元素顶部的清晰文本

Question

我需要在使用 -webkit-transform:translate3d() 转换的一些元素之上 float 一些文本。我发现的问题是，我能够将元素堆叠在任何经过​​ 3d 转换的元素之上的唯一方法是同时使用 translate3d() 并将其放在上面在 z 轴上。这对图像和形状来说没问题，但对文本来说就很糟糕了，因为文本模糊得令人无法接受。

是否有某种方法可以将非 3d 转换的文本 float 在 3d 转换的元素之上或保持文本的清晰度？

Answer 1

您不需要使用 3d 变换来让文本 float ，只需在背景和文本上设置 z-index 即可。也就是说，当与 3D 动画结合使用时，文本渲染可能非常难以预测(而且移动 safari 在渲染方面往往比桌面 safari 好得多，所以如果你正在为移动设备预览某些东西 - 真的要在你的实际 iphone 上查看它。)

也就是说，您可以尝试一些方法来让文本在桌面 safari 中看起来不像所有 IE6。

1) 将 font-weight 设置为 light，然后添加一个像素 -webkit-text-stroke 以比你的文本更浅的色调2) 添加一个零偏移和 1 或 2 像素模糊的浅色调文本阴影3) 使字体大小非常大，并使用 3D 转换将其缩放到您需要的大小。4) 使用字体平滑