阻止渲染时像素字体模糊

Question

我正在尝试以像素复古外观创建一个小游戏，并且使用像素化字体。不幸的是，我无法以与源字体一样的锐度渲染字体。

关于我的mcve：

我为fonts/pokemon_classic.ttf使用this字体（我发现无法在线托管该字体，因此没有jsfiddle），但是您可以使用任何喜欢的像素字体。 下面的示例呈现如下字体：

如何使此文本呈现与源字体一样的清晰？它应该看起来像这样（编辑后的图像）：

root的比例可能会在运行时更改以适合屏幕

一个不太可行的解决方案可能会起作用，那就是根据某个阈值将每个像素的alpha固定为0或1，但我不知道该怎么做。 / p>

JS：

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
let scale = 30;
let app = new PIXI.Application();
document.body.appendChild(app.view);

app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);

let root = new PIXI.Container();
app.stage.addChild(root);
root.scale.set(scale);

document.fonts.load('8pt "pokemon"').then(() => {
    let text = new PIXI.Text("Test", {fontFamily: 'pokemon', fontSize: 8, fill: 0xff1010});
    root.addChild(text);
});

CSS：

@font-face {
    font-family: 'pokemon';
    src: url("fonts/pokemon_classic.ttf");
}

* {
    padding: 0;
    margin: 0;
}

Answer 1

会使文字模糊的东西。...

1. SCALE_MODE
2. 子像素定位。为v4，v5创建新的roundPixels时打开PIXI.Application，您可以通过PIXI.settings.ROUND_PIXELS = true;全局设置，也可以单独设置displayObject.roundPixels = true;
3. 缩放

因此，您在＃1方面表现出色，但＃2和＃3可能会成为问题。