使用笔划并填充字体来创建图层时，如何隐藏屏幕阅读器和搜索引擎机器人的重复文本？

Question

我试图用两种字体分割排版来构建一个h1：笔触字体和填充字体：

重叠两个图层我可以控制填充和描边颜色：

问题是，在HTML标记中，我需要复制内容。像这样：

<h1>
    <span style="font-family:fill;">Lorem Ipsum</span>
    <span style="font-family:stroke;">Lorem Ipsum</span>
</h1>

我要求在DOM中为机器人和盲人设备隐藏其中一个方法。有可能吗？

Answer 1

aria-hidden似乎就是你所需要的。

  

在支持浏览器和支持辅助技术的同时，内容不会通过辅助技术传达给用户。

所以这应该有用。

<h1>
    <span style="font-family:fill;">Lorem Ipsum</span>
    <span style="font-family:stroke;" aria-hidden="true">Lorem Ipsum</span>
</h1>

另见this answer.