应用混合混合模式后的较厚文本:差异

Question

我想要做的是创建将改变颜色的界面,具体取决于背景的颜色,使文本始终可读.到目前为止一切正常.我已经录制了我的浏览器以显示一个工作示例:

从我的研究中,我发现实现这一目标的最佳方法是使用mix-blend-mode: difference;.唯一的问题是,由于一些未知的原因,文字变得大胆.

最初我想提供演示但mix-blend-mode不在代码片段中工作.我不确定为什么,我看过其他人在演示中使用它,但对我来说,它用红色突出显示.

无论如何,这是一张图片(浏览器截图的部分内容):

如您所见,应用mix-blend-mode: difference;文本后显然更厚.也许这不是什么大不了的事,但当我将它应用于较小的文本时,它看起来非常糟糕.

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

我的问题是:一个人可以得到相同的结果,没有铭文变得更厚(？)或者它可能是这样的工作,我无能为力？

我不想将字体样式更改light为强制不同的外观.

编辑:好的,所以这是一个简单的例子 - 我不知道为什么,但这次它有效.上次mix-blend-mode: difference;在demo中根本没用,这就是为什么我用图像来描述我的问题.

总之,在文本左右侧是没有 mix-blend-mode: difference;,要能够看到其中的差别.奇怪的是白色版本mix-blend-mode: difference;似乎没有好看 - 我刚刚通过在黑色bg上添加版本来发现它.

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