Web/CSS: Pixel perfect/cleartype字体

Question

我有一个像素字体(即大小为10px的字符恰好由1个像素宽的部分组成)。我在我的网页中使用它，但是字体没有呈现出像素完美，而且似乎有一个cleartype问题(我想这就是它的名字？)。我的意思是，即使字体颜色是纯白色，红色/蓝色像素仍然存在。你可以在下面的图片中看到它。

以下两个截图将帮助您了解我的问题：

我目前在我的html页面(用Chrome渲染)上有这个：

​

​

但我想要的是：

​

​

正如您在第一张图片中所看到的，即使所有的文本块都是具有相同css的跨度，它们看起来也不一样，这取决于它们在页面中的位置(我猜这是因为它们被放在一个浮点型位置，而不是一个整数，所以1个像素看起来像~1.5)。

注意:字体当前以.woff2和.woff格式在@font-face中按顺序导入。

Answer 1

我发现了一种非常适合我的字体：https://www.dafont.com/fr/pixel-operator.font。

我必须小心地放置html元素，以避免使用浮点数位置来定位它们，但这是迄今为止我发现的最一致的字体。