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

我想要做的是创建会根据背景颜色更改颜色的界面，以使文本始终可读。到目前为止一切正常。我录我的浏览器显示工作示例：应用混合混合模式后的较浓文本：差异

从我的研究，我发现最好的方法来实现这一目标，是使用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;的白色文字后，它在黑色上呈白色，但在白色背景上呈现，这很奇怪，因为字体保持不变，所以通过反转颜色，它应该看起来像普通的白色版本，但它不。我很困惑。

来源

2017-08-25 Tanuki

您可以添加的jsfiddle或使该代码放到一个片段？我们希望能够看到它的生活。 –

我已添加片段。 – Tanuki

遇到同样的问题！ – Dikeneko

我观察到，经常在应用效果属性或转换为文本时：最终出现浏览器和Chrome出现不一致的权重，出现“胖乎乎”。

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

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

来源

2017-10-18 22:49:00 EoghanTadhg

我刚测试过它。不幸的是，在这种情况下，它不起作用。感谢您的回复。 :) – Tanuki

为我工作，但现在的差异文本比正常的轻！ – Dikeneko

不幸的是，这是我能够跨浏览器获得一致的文本呈现特性的唯一方法。你也可能受制于字体本身的摆布。 – EoghanTadhg

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

回答

相关问题