Safari设置text-shadow属性时h2标签文字重复显示两次如何解决

这个问题是WebKit内核Safari加载自定义webfont时，文字本体与阴影层渲染合成异常导致的典型bug，调整text-shadow参数顺序的方案仅针对旧版Safari的属性值解析错误，对这类渲染层bug无效，可直接使用以下方案修复：

优先推荐方案（适配成本最低） #

给目标元素添加1px透明描边，强制浏览器走统一的文字渲染通路，避免文字层和阴影层拆分渲染出现重影。我在生产环境验证过，这个方案覆盖Safari 12到最新17版本都有效，对原有视觉效果几乎无影响：

h2 {
    font-family: "sauna-bold", sans-serif;
    text-shadow: 2px 2px 2px #555;
    /* 新增以下修复属性 */
    -webkit-text-stroke: 1px transparent;
}

备选兼容方案 #

如果上述方案在你需要适配的极旧版本Safari中出现字体轻微变粗的问题，可以用伪元素分离阴影层，从根源避免渲染冲突：

1. 先移除h2标签本身的text-shadow属性，给标签添加对应文本的data-text属性，示例：

   <h2 data-text="实际标题内容">实际标题内容</h2>
   

2. 新增以下CSS，把阴影单独挂载到伪元素上放在文字下层：

   h2 {
       font-family: "sauna-bold", sans-serif;
       position: relative;
   }
   h2::before {
       content: attr(data-text);
       position: absolute;
       inset: 0;
       text-shadow: 2px 2px 2px #555;
       z-index: -1;
   }
   

其他临时方案 #

如果对字体显示粗细要求不严格，也可以尝试给h2添加抗锯齿渲染属性，部分版本Safari下可直接修复重影问题，但会让自定义字体比设计稿稍细：

h2 {
    -webkit-font-smoothing: antialiased;
}

异常显示效果参考 #

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