5

I need to render some text using HTML / CSS without any screen smoothing or aliasing, or anything of the sort. The text rendered using this font also needs to have an outline. The use case is that I want the background color of the body that the text is used on to be used as a transparency key for external applications, and I would like the text to be solid and crisp, without any smoothing. This is what it looks like at the moment:

Smooth-edged font

I'm developing an app using electron. I have tried everything from text-rendering: optimizeSpeed and font-smooth: never to rendering the text using a HTML5 canvas, but I can't seem to get the output I want, which is something exactly like this, which is from an application made using C#:

Jagged-edged font

Both images are magnified 1000%. Is it possible using HTML / CSS? if not, what is the closest I could possibly get?

driima
  • 623
  • 1
  • 11
  • 28
  • http://stackoverflow.com/a/10538630/3285730 – Jacob G Jul 27 '15 at 18:34
  • @JacobGray no change. – driima Jul 27 '15 at 18:37
  • What browser/OS are you using? You might need to try something like `-webkit-font-smoothing: none` or `-moz-osx-font-smoothing: unset`. See [here](http://caniuse.com/#feat=font-smooth) for more info. – Ted Hopp Jul 27 '15 at 18:53
  • @TedHopp I believe electron uses chromium. Also, none of those change make any noticeable change to the text. I thought maybe it could be an issue with the font, however I have tried countless other fonts, all which result in the same output as the first image in my question. – driima Jul 27 '15 at 19:04
  • One thing you can try is to draw the text on a canvas, rather than html/css, and then turning that into an image with canvas.toDataURL – Mike 'Pomax' Kamermans Jul 27 '15 at 19:54

1 Answers1

2

This 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 text-shadow to gain different results. Basically you can stack them to your needs. It surely needs some tweaking.

Another good Question about it: Outline effect to text

Edit

The Font i used is Press Start 2P. Its a Google Font and you can find it here.

Community
  • 1
  • 1
Jeremy Zahner
  • 501
  • 2
  • 12
  • I made a [JSFiddle](https://jsfiddle.net/ucu4o7sr/) based on yours, but I'm not sure if rendering such a high amount of shadows will cause lag or anything, but this is the best result I can get. Using magnifier, there is still some amount of green appearing through the top left pixel of the text shadow, but it's hardly noticeable. – driima Jul 29 '15 at 15:45
  • @Rouze Performance should not really be an issue, unless you are triggering some events which would cause the browser to repaint the shadows in a short matter of time over and over. – Jeremy Zahner Jul 29 '15 at 17:37
  • I'm only updating the view every 5 minutes or so, so I guess it doesn't matter that much. – driima Jul 29 '15 at 19:26