Geek Answers Handbook

Display jagged fonts using HTML / CSS

I need to display text using HTML / CSS without anti-aliasing or anti-aliasing for the screen or the like. Text created using this font must also have an outline. The use case is that I want the background color of the body to be used as a transparency key for external applications, and I would like the text to be solid and clear, without smoothing. Here's what it looks like at the moment:

Smooth font

I am developing an application using electron. I tried everything: from text-rendering: optimizeSpeed and font-smooth: never to rendering text using an HTML5 canvas, but I cannot get the output I want, something like this, that from an application made using C # :

Over font

Both images are enlarged by 1000%. Can I use HTML / CSS? if not, then the closer I could get?

+5
source share
1 answer

It is about as close as I can get.

Jsfiddle

 h1 { font-family:'Press Start 2P', Arial; font-weight: 400; color: white; font-size: 30px; font-smoothing: antialiased; text-shadow: -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000, -8px -8px 0 black, 8px -8px 0 black, -8px 8px 0 black, 8px 8px 0 black; }

Play with the shadow of the text to get different results. Basically you can stack them according to your needs. It certainly needs some tweaking.

Another good question: Contour effect for text.

Edit

The font I used is - Click Start 2P. Its a Google font, and you can find it here.

+2
source

More articles:


All Articles