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

Question

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

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

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

无论如何，这是一张图片（浏览器截图的部分内容）：

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

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

我的问题是：一个人可以得到相同的结果而没有铭文变得更厚（？）或者它可能是这样工作而且我无能为力吗？

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

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

无论如何，左侧和右侧侧的文字是没有 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出现了臭名昭着的＆＃34;胖乎乎的＆＃34;。

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

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;

这是您的剪辑片段：

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

使用 color: #dedede; 而不是白色 (#fff) 颜色，我认为问题会解决。

<块引用>

使用浅灰色而不是全白