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

I'm making simple games in HTML5 some of which use sprite graphics. Upscaling images is easy: You draw your sprite at its minimum resolution, scale the element to your desired width and height, add the CSS flags image-rendering: pixelated; image-rendering: crisp-edges; to retain sharp edges.

But what about text, how do you pixelate it for consistency, can the text in innerHTML also be upscaled and sharpened? My text appears smooth and at high resolution which breaks the styling. Just as there's image-rendering for graphics there seems to be a text-rendering CSS property, but I'm not seeing how it can be used to achieve the effect.

CodePudding user response：

You can use fonts from websites. I would recommend you google fonts or for this specific case:

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

The results should look something like this in CSS:

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