应用混合模式：差异后，文本变得更加粗细。

Question

我想要做的是创建一个界面，根据背景颜色改变颜色，使文本始终可读。到目前为止一切都运作良好。我已经录制了我的浏览器以展示一个工作示例：

从我的研究中，我发现实现这一目标的最佳方法是使用mix-blend-mode: difference;。唯一的问题是出现了某些未知原因导致文本加粗的情况。

最初我想提供演示，但是mix-blend-mode在代码片段中无法工作。我不太确定为什么，我看到其他人在演示中使用它，但对我来说，它被突出显示为红色。

无论如何，这里有一张图片（来自浏览器截图的部分）：

如您所见，应用mix-blend-mode: difference;后，文本明显变粗。也许这不是什么大问题，但是当我将其应用于较小的文本时，它看起来真的很糟糕。

我知道这很愚蠢，但是当我尝试在Photoshop中重新创建相同的效果时，一切都很好，这意味着使用difference混合模式颠倒颜色是正确的。

我的问题是：一个人能否获得相同的结果而不会使字体变粗（？）或者可能是它的工作方式就是这样，我无能为力？

我不想改变字体样式以强制获得不同的外观。

编辑：好的，这里是一个快速的例子 - 我不知道为什么，但这次它奏效了。上次mix-blend-mode: difference;在演示中根本不起作用，这就是为什么我使用图像来描述我的问题的原因。

无论如何，左侧和右侧的文本都没有使用mix-blend-mode: difference;，以便能够看到差异。奇怪的是，没有使用mix-blend-mode: difference;的白色版本似乎看起来还不错 - 我通过在黑色背景上添加版本来发现这一点。

* {
  margin: 0;
  padding: 0;
}
.white {
  background-color: #fff;
  width: 50%;
  position: absolute;
  left: 0;
  height: 100%;
}
.black {
  background-color: #000;
  width: 50%;
  position: absolute;
  right: 0;
  height: 100%;
}
.normalb {
  position: absolute;
  top: 50%;
  left: 5%;
  color: #000;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  font-size: 42px;
  transform: translateY(-50%);
  z-index: 10;
}
.normalw {
  position: absolute;
  top: 50%;
  right: 5%;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  font-size: 42px;
  transform: translateY(-50%);
  z-index: 10;
}
.difference {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  font-size: 42px;
  mix-blend-mode: difference;
  z-index: 10;
}

<div class="white"></div>
<div class="black"></div>
<div class="normalb">example</div>
<div class="normalw">example</div>
<div class="difference">example</div>

这里是一张截图的快速比较，以便更近距离地查看：

嗯...看起来在白色文本上应用mix-blend-mode: difference;后，它被呈现为白底黑字的形式，但在白色背景下，这很奇怪，因为字体保持不变，所以通过颜色反转，它应该看起来像正常的黑底白字版本，但它并没有。我很困惑。

- Tanuki

---

你能添加一个 jsfiddle 或将代码转换为片段吗？我们想要能够实时查看它。 - Robert Moore

我已经添加了代码片段。 - Tanuki

遇到了相同的问题！ - Dikeneko

Answer 1

我注意到，当将效果属性或转换应用于文本时，浏览器中出现不一致的字重，而Chrome则被称为“胖胖的”。我已经通过将以下属性应用于受影响的元素来解决了这个问题。

-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

- EoghanTadhg

---

我刚刚测试了一下，不幸的是，在这种情况下它没有起作用。不过还是谢谢你的回复。 :) - Tanuki

虽然现在不同的文本颜色比正常的要浅，但这对我起作用了！ - Dikeneko

不幸的是，这是我能够跨浏览器获得一致文本呈现特性的唯一方法。您还可能受到字体本身的影响。 - EoghanTadhg

Answer 2

我也曾遇到过这个问题，我找到了一个解决方法，即剪切受混合模式影响的文本（请注意浏览器兼容性）。

background: white;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

这是带剪辑的代码片段：

* {
  margin: 0;
  padding: 0;
}
.white {
  background-color: #fff;
  width: 50%;
  position: absolute;
  left: 0;
  height: 100%;
}
.black {
  background-color: #000;
  width: 50%;
  position: absolute;
  right: 0;
  height: 100%;
}
.normalb {
  position: absolute;
  top: 50%;
  left: 5%;
  color: #000;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  font-size: 42px;
  transform: translateY(-50%);
  z-index: 10;
}
.normalw {
  position: absolute;
  top: 50%;
  right: 5%;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  font-size: 42px;
  transform: translateY(-50%);
  z-index: 10;
}
.difference {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  font-size: 42px;
  mix-blend-mode: difference;
  z-index: 10;
  background: white;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

<div class="white"></div>
<div class="black"></div>
<div class="normalb">example</div>
<div class="normalw">example</div>
<div class="difference">example</div>

- alyustik

Answer 3

我认为这个问题与混合模式无关，而是与字体在屏幕上的呈现方式有关。当计算机或浏览器呈现它们时，它们以某种方式“绘制”字母的边缘，以改善其易读性。它们在白色或黑色上呈现时会有所不同，因为促进易读性的具体需求也不同。抗锯齿也会产生影响，因为它也会与字形边缘玩耍。这就是为什么即使没有使用混合效果，它们看起来也不同的原因。不幸的是，我对此一无所知，我的整个设计都是基于此的 ;) 更多信息请参见：https://www.zachleat.com/web/font-smooth/

- kram08980

Answer 4

不要使用白色（#fff），而是使用#dedede颜色。我认为问题会得到解决。

使用浅灰色而不是纯白色

- Alpesh Panchal