Jump to content

How to Disable Font Antialiasing


Recommended Posts

I have this set in CSS to force pixellized images:

canvas, img { /* makes a change, noticeable [28/05/16] */
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor;

I've tried this for fonts:

font-smooth: never;
	-webkit-font-smoothing : none;

It doesn't work

This is my renderer:

renderer = new PIXI.autoDetectRenderer(width,height,{antialias: false, transparent: false});

Yet from my experience antialias:false doesn't do much

Pixi V4 by the way

Any ideas how to improve the font rendering?

As it is, even at 36px, the text is awful, and I want it at 12px, at 12px, it's enough to make someone puke


Link to comment
Share on other sites

  • 2 weeks later...

Any ideas how to improve the text rendering?

Observation: If you don't round or floor coordinates, there is an extreme amount artifacting and tearing with PIXI, this happens in general, for example when moving the map

Observation 2: This text is on the character, added with anchor.set(0.5,1), even though the character coordinates are integers, the text experiences artifacting, it wobbles from left to right while the character moves, further making the rendering worse

Theory: I'm guessing the anchor causes the Text to be rendered in non-integer coordinates, so it wobbles heavily, going back and forth, further blurring between frames

So basically:

Problem 1: The text isn't crisp/pixellated and non-antialiased, it's blurry

Problem 2: The text further tears if it's not on the stage with manually regulated coordinates

I can't find an easy solution to the text problems, thinking of manually adding each character as a sprite

Link to comment
Share on other sites

  • 1 month later...
  • 3 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...