如何使用像素化字体在文本上强制边缘清晰

问：

我正在尝试制作使用像素化字体的东西，但我似乎无法让像素保持清晰。当使用像素化字体时，它只是添加了某种抗锯齿，即使我明确希望它使用清晰的像素。

@import url(https://db.onlinewebfonts.com/c/d14098fec1a21bb32ccb0ee2ab07bb09?family=Pixelated+Display);

body {
  font-family: "Pixelated Display";
  font-size: 12pt;
  font-smooth: never; /* doesn't work outside macOS */
  -webkit-font-smoothing: none; /* doesn't work outside macOS */
  image-rendering: crisp-edges; /* doesn't affect fonts */
}

Lorem ipsum dolor sit amet, CONSECTETUR ADIPISCING ELIT.

上面，我包含了一个演示，该演示使用来自互联网的随机像素化字体（来源）。但是，在截取结果时，您可以看到文本并不像我想要的那样清晰，而是似乎被涂抹在多个像素上。要更轻松地查看此内容，只需截取文本的屏幕截图，然后将其粘贴到任何图像编辑器中，然后放大即可。这将导致以下结果：

但是，我想要的是像素化字体......像素化。如果我必须为此使用特定的字体大小，我完全赞成，但到目前为止，我还没有找到任何资源来使这个文本变得清晰，保持应有的像素化。正如您在代码段的 css 中看到的那样，和样式似乎根本不会影响文本（至少，不是在所有操作系统上）。image-renderingfont-smooth

我尝试更改的网站上的现场演示是此页面，但由于该网站的 CSP，我无法在此处导入相同的字体。正如您在图像顶部（嵌入到图像中的文本）所看到的，顶行比图像的其余部分（放置在图像顶部的文本）要清晰得多。