css Arial字体在wordpress上像素化

Question

我已经阅读了Chrome如何渲染字体以及其他浏览器之间的差异等。但最近我提出了一个有趣的场景。我有两个文件。一个是wordpress页面，其中字体用于标题。其他是具有相同代码的静态html页面。在静态html页面上，文本餐厅设备部件显示顺畅。但是相同的浏览器和wordpress页面字体是像素化的。什么可能导致这个问题？

这是CSS：

font-size: 60px;
line-height: 70px;
font-family: Arial;

这是显示问题的图像。你注意到p和n，你可以看到像素化。 这是演示 - HTML文件： http://restaurantapplianceparts.com/dev/wp-content/themes/vizio/test.html

Wordpress页面：http://restaurantapplianceparts.com/dev/

我在Windows上使用chrome。

此致 艾哈迈尔

Answer 1

如果我们放大屏幕截图（确保我们不对图像重新取样），我们可以看到两个网站都显示相同的字体，颜色相同且具有相应的消除锯齿效果：

我怀疑这只不过是字体渲染软件在不同环境中遇到相同文本时所做出的不同决定所造成的视觉效果。例如，第一个样本恰好适合水平基线，但在垂直线上显示更多伪像。但他们都看起来正确的文字解决方案;只有人类的大脑才会发现其中一个更舒服。

显然，Chrome中曾经有一个-webkit-font-smoothing CSS选择器，但它已不再可用。