9

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

在此处输入图像描述

根据我的研究，我发现实现这一目标的最佳方法是使用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;看起来还不错——我只是通过在黑色背景上添加版本才发现它。

* {
  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;到白色文本之后，它被渲染为黑底白字但在白色背景上，这很奇怪，因为字体保持不变，所以通过反转颜色它应该看起来像正常的黑底白字版本，但它没有。我很困惑。

4

4 回答 4

3

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

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

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

于 2017-10-18T22:49:00.643 回答
1

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

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>

于 2021-03-20T13:15:18.223 回答
1

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

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

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

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

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

于 2018-10-17T16:28:09.207 回答
0

使用颜色代替白色 ( #fff)#dedede颜色。我认为问题会得到解决。

使用浅浅灰色而非全白

在此处输入图像描述

于 2021-08-11T14:48:22.530 回答