应用混合混合模式后文本变粗：差异

Question

我想做的是创建一个界面，该界面会根据背景颜色改变颜色，以使文本始终可读。到目前为止一切正常。我已经记录了我的浏览器以显示一个工作示例：

根据我的研究，我发现实现这一目标的最佳方法是使用mix-blend-mode: difference;。唯一的问题是，由于某些未知原因，文本变得粗体。

最初我想提供演示，但mix-blend-mode 在代码 sn-p 中不起作用。我不太清楚为什么，我看到其他人在演示中使用它，但对我来说，它以红色突出显示。

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

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

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

我的问题是：如果铭文变得更厚（？），一个人能否获得相同的结果，或者它可能是这样工作的，我无能为力？

我不想将字体样式更改为light 以强制显示不同的外观。

编辑：好的，这是一个简单的例子——我不知道为什么，但这次它奏效了。上次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; 应用于白色文本之后，它在黑色上呈现为白色，但在白色背景上呈现，这很奇怪，因为字体保持不变，所以通过反转颜色它应该看起来像普通的黑白版本，但事实并非如此。我很困惑。

Answer 1

我经常观察到，在对文本应用效果属性或转换时：最终会在浏览器中出现不一致的权重，并且 Chrome 会出现臭名昭著的“胖乎乎的”。

我已经能够通过将以下属性应用于受影响的元素来解决此问题。

div{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

Answer 2

我认为这个问题与混合模式无关，而与字体在屏幕上的呈现方式有关。

当计算机或浏览器渲染它们时，它们会以某种方式“绘制”字母的边缘以提高它们的易读性。它们以不同的方式呈现在白色或黑色上，因为促进这种易读性的具体需求是不同的。抗锯齿也会产生影响，因为它也会影响字体边缘。

这就是为什么即使不使用混合效果它们看起来也不同的原因。

不幸的是，我对此一无所知，我的整个设计都是基于此；）

更多信息在这里：https://www.zachleat.com/web/font-smooth/

Answer 3

这仍然发生在我身上，我找到了一种解决方法，方法是剪切受混合混合模式影响的文本（注意浏览器兼容性）

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

这是您的带有剪辑的 sn-p：

* {
  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>

Answer 4

不要使用白色 (#fff) 颜色，而是使用 #dedede 颜色。我想问题会解决的。

使用浅灰色而不是全白