问题描述
我有一个像素艺术字体(在 ttf 文件中),我发现它的原始分辨率为 8 像素 (CTX.font = '8px mainfont';
)
当我做 fillText 时,字体在 Firefox 中很完美,但在 chrome 中很模糊:
我尝试将 X 坐标偏移不同的量,例如 0.5,但它只会变得更模糊。通常它总是一个整数。
我尝试了 CTX.translate(0.5,0);
和 CTX.imageSmoothingEnabled = true;
我试过 css font-smooth: none;
font-smooth: never;
-webkit-font-smoothing : none;
过去,我不得不将字体转换为特殊格式,并使用库在画布上绘制它们。只是希望 5 年后他们添加了一种官方方法来解决这个问题吗?
解决方法
只是希望 5 年后他们添加了一种官方方法来解决这个问题吗?
嗯……就在几个月前,more text modifiers一直是added to the canvas API,其中ctx.textRendering
,基本上相当于SVG's text-rendering
。
因此,所有选项都不会真正强制关闭抗锯齿,但使用 textRendering = "geometricPrecision"
肯定会获得更好的结果。
此外,目前只有基于 Chromium 的浏览器支持此功能……并且仅在打开 chrome://flags/#enable-experimental-web-platform-features
时才支持。
const label = document.querySelector( "label" );
const canvas = document.querySelector( "canvas" );
const ctx = canvas.getContext( "2d" );
if( !ctx.textRendering ) {
console.warn( `Your browser doesn't support the textRendering property on Canvas
If you are on Chrome be sure to enable chrome://flags/#enable-experimental-web-platform-features` );
}
let state = 0;
const states = [
() => {
label.textContent = "optimizeLegibility";
ctx.textRendering = "optimizeLegibility";
drawText();
},() => {
label.textContent = "geometricPrecision";
ctx.textRendering = "geometricPrecision";
drawText();
},() => {
label.textContent = "difference";
ctx.textRendering = "optimizeLegibility";
drawText();
ctx.globalCompositeOperation = "xor";
ctx.textRendering = "geometricPrecision";
drawText();
ctx.globalCompositeOperation = "source-over";
}
];
document.fonts.load( "120px pixel" ).then( begin );
function begin() {
ctx.clearRect( 0,canvas.width,canvas.height );
ctx.font = "120px pixel";
states[ state ]();
state = (state + 1) % states.length;
setTimeout( begin,1000 );
}
function drawText() {
ctx.textBaseline = "top";
ctx.fillText( "TESTING",0 );
}
@font-face {
font-family: pixel;
src: url("https://dl.dropboxusercontent.com/s/hsdwvz761xqphhb/pixel.ttf");
}
<label></label><br>
<canvas width="500"></canvas>
就目前而言,最好的办法可能是将您的文本预渲染为位图。