html - 在字体上使用描边和填充来创建图层时，如何隐藏屏幕阅读器和搜索引擎机器人的重复文本？

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 似乎是您所需要的。

In supporting browsers in conjunction with supporting assistive technology the content is not conveyed to the user via the assistive technology.

所以这应该可行。

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

另见 this answer.