文本灰度滤镜，移除 Ghost's Casper 的部分文本

Grayscale filter on text, removes part of the text on Ghost's Casper

我在网上搜索了很长时间，但找不到答案。

首先，让我解释一下我想要实现的目标，一些网站在他们的文本上使用灰度抗锯齿，这让他们看起来更好。 (海事组织)

这是来自媒体的示例：https://i.imgur.com/6TiBDVl.png 如果放大，文本将保持灰色。

Twitter 也这样做：https://i.imgur.com/bg66Og1.png

现在，一个不这样做的例子，Google：https://i.imgur.com/OZgJXR2.png 我修改了 CSS 并应用了 filter: grayscale(0%);，这是我所知道的实现此效果的唯一方法。

已修改 Google：https://i.imgur.com/abYCmGI.png

现在，我的问题。默认情况下 Ghost 不会这样做：https://demo.ghost.io/welcome/

你可以在这里看到：https://i.imgur.com/MCuGf3D.png

当我将我所做的事情应用到上面的 Google 时，会发生这种情况：https://i.imgur.com/rd8lUzo.png

号没了，吃了一半

这是一张更好的照片：https://i.imgur.com/FsE9ZLF.png

我所做的只是在 Google 和此处添加 filter: grayscale(0%);。它在 Google 上表现出色。也在 Wordpress 中工作，但在 Ghost 中，我遇到了这个奇怪的问题。

有什么办法可以解决这个问题，或者 Twitter、Medium 等是如何解决这个问题的？我试图查看他们的 CSS，但没有关于灰度或过滤器的内容。还看到了一些应该可以做到这一点的抗锯齿的东西，但在 Chrome 上没有任何作用。

任何帮助将不胜感激，提前致谢。

我试了一下他们的 CSS 并得出结论：您描述的有序（和编号）列表 ol 似乎会干扰过滤器并且不会那样接受它们。但这是一个结构性问题。如果我们（或他们）更改 markup-structure 或搜索导致此问题发生的 CSS 属性，那肯定会有所帮助。

以下对我有用：

body { filter: grayscale(0%) };

或者，您可以轻松地将 filter 应用于包含所需文本的 p 或 div 元素。