我遇到了不同浏览器如何在HTML5 Canvas上呈现字体大小的问题.具体而言,字体大小不是整数.例如"8.5px Arial","2.23em Arial"等.
对于canvas.font = FontSize +"px Arial"; 其中FontSize是(8.1,8.2,8.3,...)我期望得到一个线性结果,但是唯一一直存档的浏览器是IE!( 我知道 ).Firefox的收益率低于11.2px,但线性超出此范围.Chrome和Safari仅将字体缩放为整数值.
舍入规则似乎设置为像素并向下舍入到最接近.5的整数
我的画布应用程序正在执行一些程序化的动画变换(缩放和翻译)为了提高效率,尽量避免画布变换,虽然我怀疑它会解决问题,但我也没有通过设置仅使用CSS3的html文本大小来测试它( Canvas.font假设是根据规范)
浏览器在pt,px,em和%字体大小之间的行为至少是一致的.[编辑:除了Safari不会渲染%尺寸]
[旁白:所有字体看起来有点大胆一度爆炸了一下.当我们从17.4px变为17.5px时,Safari会拿出那个蛋糕.BAMB!]
我已经在下面附上了一些示例图片,但是我真的想要了解如何使所有浏览器更像IE的想法(再也没想过我会这么说) - 这是一个bug还是渲染字体的标准？
这是我的测试代码,可以复制PX字体大小的情况.
<!DOCTYPE html><html><head><script>
function display() {
var canvas = document.getElementById('test');
// For EM and % cases....
//canvas.style.font="5px Arial";
canvas.height = 1000;
var context = canvas.getContext('2d');
var minSize = 10;
var lineHeight = 100;
for(var a=minSize; a< 20; a+=0.1)
{
var font_size = Math.round(a*10000)/10000;
context.font = a + "px Arial";
context.fillText("A: EXAMPLE TEXT > " + font_size, 20, (font_size-minSize)*lineHeight);
}
} …