在 Windows 上，在某种程度上也在 Mac OS 上，使用不同的浏览器(Firefox、Chrome、Safari)，我们的菜单栏具有相当像素化/模糊的字体渲染。这是在一个使用 Bootstrap 4.1.3 的 ASP.NET Core 2.1 网站上，但它很容易用简单的 HTML 重现:https://jsfiddle.net/2tgc9r84/
<html>
<body style="background-color:#e72c87;">
<p style="font-size:20pt;">
This is some text that looks terrible.
</p>
</body>
</html>
有趣的是，相同的字体在网站的其他区域呈现得很好。我在激活了 150% 缩放比例的 4K 显示器上注意到了这一点，但问题也出现在 100% 缩放比例下。我也尝试过使用不同的字体，所以显然这也不是字体的问题。
最初我认为这是透明度或转换的问题，但最后，我尝试简单地更改背景颜色 - 事实证明这种模糊对于红色和深蓝色非常明显(当然，这些的组合，如洋红色), 并且与大多数其他颜色几乎不可见。此外，通过更改主要背景颜色，我可以在其他区域重现该问题。
您可以直接查看出现此问题的站点:https://beat-the-rhythm-vr.com/Home/Social (接受 cookie 后出现带有模糊文本的导航)。
这是一张显示不同背景效果的图像，也是在 Mac OS 上渲染的(Mac OS 屏幕截图在图像中显得较小):
据我所知，这在 iOS 上根本不会发生。在 Mac 上，我不太清楚屏幕上的问题，但在截屏时它确实变得很明显。然而，由于屏幕截图的缩放，这也可能是一个人工制品。
这是它在 iOS 上的样子(当窗口足够小以获得与移动设备上相同的布局时，我在 Windows 上遇到了同样的模糊，所以这也不是导致此问题/修复此问题的问题):
显而易见的问题:有什么方法可以解决这个问题，如果可以，如何解决？
编辑:这是对 Porter 回答的评论的补充(我无法在评论中添加屏幕截图，所以我将其发布在这里):
编辑 2:虽然这篇文章是关于一个稍微不同的问题，但我的猜测是我所看到的实际上只是 ClearType 的一个限制，它与文章概述的内容相关:Color-aware ClearType requires access to fixed background pixels, which is a problem if you don't know what the background pixels are, or if they aren't fixed
当背景颜色未知时，ClearType 显然不起作用，从我所看到的情况来看，它似乎主要是为白色背景上的黑色文本设计的，也适用于深色背景上的浅色，但不是红色/蓝色/洋红色背景(以及任何字体颜色)真的太多了。
最佳答案
我无法在 1080p 或 4K 显示器上重现此内容，在 Firefox 和 Chrome 上使用移动或 WebView 。字体确实倾向于与背景颜色混合，因此并非字体的每个像素都将是相同的颜色；它会在边缘融合。字体越小，用于混合的像素就越少。如果您使用更大的字体，是否会出现同样的问题？
关于html - 如何修复红色/蓝色背景(Windows、Firefox、Chrome 等)上的模糊/像素化字体渲染？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57825193/