为什么两段相同的文本会呈现脉动闪烁效果？

• 所有<p>标签被CSS设置了position: absolute，两个内容完全一致的<p>会默认重叠在同一位置，两层文本叠加的视觉效果比单层文本更粗、颜色饱和度更高。
• JS逻辑中使用的document.querySelector('p')只会匹配到页面的第一个<p>元素，定时器每1秒会切换该元素的显示/隐藏状态：
  • 第一个<p>显示时，页面呈现两层叠加的文本
  • 第一个<p>隐藏时，页面仅呈现第二个<p>的单层文本
• 两种视觉状态每秒交替切换，就形成了你观察到的脉动闪烁效果，和字体渲染无关。

如果要验证这个逻辑，可以给第二个<p>单独设置差异化样式，修改后的CSS参考：

p {
  position: absolute;
  color: red;
}
p:nth-child(2) {
  color: blue;
}

修改后你会看到文本每秒在红色和蓝色之间切换，就能直观看到两个元素的交替展示逻辑。

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