javascript - HTML5/CSS : How do you create pixelated text (upscale with sharp edges)

Question

我正在 HTML5 中制作简单的游戏，其中一些使用 Sprite 图形。放大图像很简单:以最小分辨率绘制 Sprite ，将元素缩放到所需的宽度和高度，添加CSS标志image-rendering:pixelated ;图像渲染:清晰边缘； 保留锐利边缘。

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

Answer 1

您可以使用网站上的字体。我建议您使用谷歌字体或针对此特定情况:

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

CSS 中的结果应如下所示:

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