How to Disable Font Antialiasing

[kaan]

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

[kaan]

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

[Prozi]

Basically you can try to increase font size like x2 or x4 and use scale.x, scale.y = 0.5 / 0.25

[ivan.popelyshev]

First option: Inrease font size, decrease scale. Font size must be in range 0.5x-2x of real pixels. 

Second option: pixelated font. Hack PIXI.Text that way it uses linear filtering for the texture it is creating (updateText function).

[labrat.mobi]

in pixi v3, I use..
 

PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;

I hope v4 supports it too.

[noobmaster5318008]

// Disable interpolation when scaling, will make texture be pixelated
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

This works in pixi v5.

[ivan.popelyshev]

"text.roundPixels=true" works in v5 too.