HTML5 / CSS：如何创建像素化文本（带有锐边的高档）

Question

我正在 HTML5 中制作简单的游戏，其中一些使用精灵图形。放大图像很容易：您以最小分辨率绘制精灵，将元素缩放到您想要的 width 和 height，添加 CSS 标志 image-rendering: pixelated; image-rendering: crisp-edges; 以保留锐利的边缘。

但是文本呢，如何像素化以保持一致性，innerHTML 中的文本也可以放大和锐化吗？我的文字看起来流畅且分辨率高，这打破了样式。正如图形有 image-rendering 似乎有 text-rendering CSS 属性，但我没有看到如何使用它来实现效果。

Answer 1

您可以使用来自网站的字体。我会向您推荐 google 字体或针对此特定情况：

https://www.fontsquirrel.com/fonts/list/style/Pixel

CSS 中的结果应如下所示：

@font-face { 
font-family: myFirstFont; src: url("URL");
}
div {
font-family: myFirstFont;
}