绕过网页上的清除类型

Question

我正在尝试模仿desiringgod.org网站上文章中的文字。他们在白色背景的正文中使用深灰色的Merriweather字体。

当我在网站上进行相同的设置时，文本看起来有所不同，而不是那么平滑和更暗。我检查了所有CSS，甚至检查了一些JavaScript，以确保所有内容都相同，并查看是否发生了特殊情况。我看不到任何可以解释差异的原因。 （我的线高不同，但这不会有所不同）。我什至尝试下载他们的WOFF2字体只是为了看看是否有所作为（与使用Google的字体相反），并且也没有任何改变。

然后我对每页上的一部分文本（他们和我的文本）进行了屏幕截图。将其带入Photoshop中时，我注意到对于一个来自渴望的上帝网站Photoshop的用户，它确定剪贴板上的图像是灰度图像，但对于我来说，它确定为RGB。然后仔细看，我发现我的页面似乎受到Windows上的ClearType的影响，而渴望的上帝却没有。如果放大下面的示例，您将在我的透明类型上看到典型的彩色抗锯齿，而在其上看到灰色的抗锯齿。

有什么可能的办法吗？有什么办法可以阻止这种情况的发生？关于渴望神的文字更令人愉悦，我希望有同样的效果。

Answer 1

花了太多时间在看起来没有太大不同的东西上后，我终于弄明白了。哇...

他们将此类放在放置其文本的容器之一上：

.gpu {
backface-visibility: hidden;
perspective: 1000}

一旦我对我的容器执行了所有的抗锯齿处理，便是灰度级。

Answer 2

如您所见，它们的版本与Google的Merriweather稍有不同。

 public async Task<IActionResult> OnGetAsync(int? id, int? listId)

/* latin */

@font-face {
  font-family: 'Merriweather Google';
  src: url(https://fonts.gstatic.com/s/merriweather/v19/u-440qyriQwlOrhSvowK_l5-fCZM.woff2) format('woff2');
}
@font-face {
  font-family: 'Merriweather Desiring';
  src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/merriweather-v11-latin-300.64e603fa.woff2) format('woff2');
}
p.google {
  font-family: "Merriweather Google";
}
p.desiring {
  font-family: "Merriweather Desiring";
}
p {
  font-size: 18px;
  font-weight: 300;
  line-height: 180%;
  letter-spacing: normal;
  max-width: 700px;
  border-bottom-color: rgb(51, 51, 51);
  border-bottom-style:none;
  border-bottom-width: 0px;
  color: rgb(51, 51, 51);
  vertical-align:baseline;
  width:700px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}