网站上的灰色文字有颜色

Question

我遇到了一些很好的CSS设计，我试图在我自己的网站上复制。问题是，设计呈现为图像......实际页面的屏幕截图。这意味着我一直在尝试在我自己的CSS中复制设计。

问题在于：我正在渲染的文本在我的CSS中被着色为灰度（所有rgb值相等），但如果我截取我的页面并放大，则可以看到彩色像素整篇文章。原始设计没有那些......它是完全灰色的，因此看起来更加流畅。

以下是常规尺寸的原件（非常光滑的外观）：

此处放大（注意所有像素均为灰度）：

现在，这是我的常规尺寸尝试（请注意它看起来有多粗糙）：

放大（查看所有彩色像素）：

这里到底发生了什么？如何在没有彩色像素的情况下实现原始设计的流畅外观？

Answer 1

原作者在拍摄屏幕截图时可能使用了不同的系统。 Mac和Windows机器以不同方式平滑字体。有一个-webkit-font-smoothing属性，但我认为这将仅适用于Mac上的Safari。

我经常尝试使用text-shadow来实现更流畅的字体。结果取决于文本和背景的对比度。

How To Properly Smooth Font Using CSS3