在Safari 9.1.1中使用多个大文本阴影时，我遇到了一个奇怪的字体渲染问题。文本和阴影渲染得很好，但看起来文本的一部分在原始文本下方约110px处复制。
以下是该问题的一个示例（必须在Safari中查看）：
h3 {
text-shadow: 0 0 40px #000, 0 0 80px #000;
}<h3>
Testing multiple text-shadows
</h3>
复制文本的位置比真实文本低大约110px，并在第二个阴影的扩散范围为60到70px时开始出现。
第一个阴影的属性以及第二个阴影的不透明度和位置没有任何效果。只有第二个阴影的字体大小和传播似乎有所不同。
我能够摆脱它的唯一方法是删除或减少文本阴影。
如果我添加第三个大文本阴影，我还能够第二次复制文本。
有没有人见过这个？任何人都有修复？
答案 0 :(得分：2)
使用D3.js创建复杂的数据可视化时，我们看到了同样的错误。我们只能通过删除第二个text-shadow来修复它。 bug reported for Webkit似乎非常相关，但在这方面没有任何进展。
答案 1 :(得分：1)
只需使用text-shadow: 0 0 40px #000;
答案 2 :(得分：1)
经过一些实验，它似乎与文本阴影的模糊半径值有关。
对于您的特定情况，如果您将其更改为
h3 {
text-shadow: 0 0 40px #000, 0 0 60px #000;
}
Safari中的文本工件应该会消失。你将同时拥有两个阴影，但模糊不会那么大，所以YMMV。