不透明度低于 1 时带有奇怪阴影（模糊）的字体（仅限 Chrome）

Posted 2023-03-06

【中文标题】不透明度低于 1 时带有奇怪阴影（模糊）的字体（仅限 Chrome）

【英文标题】：Font with strange shadow (blur) when Opacity is below 1 (Chrome Only)

【发布时间】：2014-06-01 07:33:53

【问题描述】：

我正在使用 Bootstrap 工具提示组件，并注意到不透明度低于 1 时文本的奇怪行为，仅在 Chrome 中。它显示了某种边框，可能是为了提高可读性，但在这种情况下，它更像是一个错误而不是帮助。

重现问题：（在 FireFox 中很好，在 Chrome 中不好）fiddle

html 代码

<p>
    First Paragraph
</p>
<p id='StrangeParagraph'>
    Second Paragraph
</p>

CSS 代码

body
    background-color:#000;

p
    font: normal 11px Arial, Helvetica, sans-serif;
    color: #fff;

#StrangeParagraph
    opacity: 0.9;

下面是显示详细问题的图片...

（我知道它看起来不错，但换句话说，在我必须使用的其他成语中，它开始变得有点模糊，并且有点难以阅读。）

所以，我的问题不完全是为什么......但是如何解决这个“鬼”渲染？

详情： - Windows 7 专业版 x64 - Windows ClearType 关闭 - Google Chrome 版本 34.0.1847.116（最新） - 显卡 nVidea GeForce GT540

（已经尝试过，但没有成功： 文字阴影 -webkit-字体平滑 -webkit-text-stroke 字体粗细 -webkit-backface-visibility 字体平滑（Chrome 甚至不接受它））

【问题讨论】：

在 Chrome 上看起来不错。

字体平滑问题？尝试来自here 的提示。而且我在 Chrome 中也没有看到平滑。

在这两种浏览器上看起来都一样。我明白您对图片的看法，但我无法在此处复制类似的内容。

感谢您的提示，但在这里尝试过，但还没有……也许这与我们的 Chrome 渲染方式有关（硬件加速，不知道）

你试过color: rgba(255,255,255,0.9)吗？

【参考方案1】：

首先，我要感谢@Tschitsch。他的评论是黑暗中的一盏明灯。所以，谢谢！

最后，我仍然不知道其他用户是否没有目睹或只是没有注意到这个问题。无论如何，我要感谢所有试图提供帮助的人。

现在，回答：

稍微观察一下，我注意到只有当文本位于不透明度设置为低于 1 (100%) 的 DIV 内时才会发生这种情况。当不透明度为 1 时，文本呈现完全清晰（所以，我认为这不是正常的事情。它不像......这种字体在 Chrome 中以这种方式呈现，你无能为力）。 我还注意到文本本身是半透明的没有问题。

所以，总而言之，问题只是 div 中的文本继承了 opacity 属性。

我的解决方案是直接在元素的颜色中使用不透明度，女巫允许我使 DIV 半透明，而不为文本设置不透明度（但您也可以在文本中使用 rgba，无需任何问题）。

为了具体解决引导工具提示组件 (v 2.3.2) in Chrome 中的问题，下面是我的代码。它使文本在 Firefox 27、Chrome 34、IE 8 中清晰（我仍然不相信最后一个哈哈哈）

CSS代码

.tooltip.in 
    opacity: 1;


.tooltip-inner 
    color: #FFFFFF;
    background-color: rgba(0,0,0,0.8);


.tooltip.top .tooltip-arrow 
    border-top-color: rgba(0,0,0,0.8);

我真的希望我也能在这个问题上帮助任何人。

（仍然不明白为什么被否决...）