使用CSS filter适配文本颜色时，为何仅浅色背景下文本变粗？

你遇到的是CSS滤镜组合在处理浅色背景+浅色文本时，因像素级颜色转换产生的视觉加粗问题——这类滤镜（尤其是contrast和invert叠加）会强化文本边缘的半透明像素，让文字看起来变粗，深色背景下因为颜色反差大，这个视觉效果不明显。

替代方案：用mix-blend-mode实现文本反色 #

推荐使用mix-blend-mode: difference来实现文本随背景自动反色，这个方法不会产生滤镜带来的像素失真问题，效果更稳定：

.container {
  background-color: white;
}
.text {
  color: white;
  mix-blend-mode: difference;
}

.container-gray {
  background-color: #f0f8ff;
}

.container-black {
  background-color: black;
}

<div class="container">
  <div class="text">Text</div>
</div>

<div class="container-gray">
  <div class="text">Text</div>
</div>

<div>Text</div>

<div class="container-black">
  <div class="text">Text</div>
</div>

原理说明 #

mix-blend-mode: difference会计算文本颜色和背景颜色的差值，自动生成对比色：

• 白色文本在白色背景上会变成黑色
• 白色文本在浅色背景上会生成深色对比色
• 白色文本在黑色背景上会变成白色

完全不需要复杂的滤镜组合，就能实现自适应背景的文本颜色，同时避免滤镜导致的视觉加粗问题。

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