Estoy creando juegos simples en HTML5, algunos de los cuales usan gráficos de sprites. Mejorar las imágenes es fácil: dibuja su sprite en su resolución mínima, escala el elemento al width y height deseado, agrega las banderas CSS image-rendering: pixelated; image-rendering: crisp-edges; para retener los bordes afilados.
Pero, ¿qué pasa con el texto? ¿Cómo se innerHTML para mantener la coherencia? ¿El texto en HTML interno también se puede mejorar y agudizar? Mi texto aparece uniforme y en alta resolución, lo que rompe el estilo. Así como hay image-rendering para gráficos, parece haber una propiedad CSS text-rendering , pero no veo cómo se puede usar para lograr el efecto.
Puede utilizar fuentes de sitios web. Te recomendaría google fonts o para este caso en concreto:
https://www.fontsquirrel.com/fonts/list/style/Pixel
Los resultados deberían verse así en CSS:
@font-face { font-family: myFirstFont; src: url("URL"); } div { font-family: myFirstFont; }