我遇到了不同浏览器如何在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的整数
我的画布应用程序正在执行一些程序化的动画变换(缩放和翻译)为了提高效率,尽量避免画布变换,虽然我怀疑它会解决问题,但我也没有通过设置html文本大小仅用CSS3来测试这个Canvas.font假设是根据规范)
浏览器在pt,px,em和%字体大小之间的行为至少是一致的. [编辑:除了Safari不会渲染%尺寸]
[旁白:所有字体看起来有点大胆一度炸毁了一下.当我们从17.4px变为17.5px时,Safari会拿出那块蛋糕.BAMB!]
我在下面附上了一些示例图片,但是我们真的想要了解如何让所有浏览器更像IE的想法(再也没想过我会这么说) – 这是一个bug还是渲染字体的标准?
这是我的测试代码,可以复制PX字体大小的情况.
像素比例
点量表
em scale – 1em = 5px Arial
百分比 – 100%= 5px Arial