Question

我们正在使用Canvas Context对象从em/pt中的px转换字体大小，如下所示：

<canvas id="test" style="width: 300; height: 100"></canvas>
...
<script>
var c = document.getElementById('test');
var ctx = c.getContext('2d');
ctx.font = 'bold 12px Arial';
var parsedFont = ctx.font;
ctx.fillText(parsedFont, 10, 60);
</script>

输出：

12px Arial

Jsfiddle：http://jsfiddle.net/1neqar7k/5/

问题是，在Safari中，font-weight组件丢失了。我是在做错什么还是Safari错误？在Chrome中正常运行。

Answer 1

这确实是一个错误，因为the specs要求这样做，

获取时，font属性必须返回上下文当前字体的序列化形式（没有“ line-height”组件）。

如果不是默认值（400或normal），则字体粗细应该是字体序列化形式的一部分。

但是请注意，即使Chrome在这里也有问题，因为即使此字体由数字值设置，它们也不包含font-weight属性：

var ctx = document.createElement('canvas').getContext('2d');
ctx.font = '600 15px serif';
console.log(ctx.font); // only Firefox correctly outputs '600 15px serif'

但是我不明白您为什么使用CanvasRenderingContext2D来完成这项工作...

在CSSOM的首要目标API（例如Element）中，更好地实现了CSS解析和序列化。
因此，如果不是使用画布上下文而是使用虚拟元素，那么它可以随心所欲地工作：

var el = document.createElement('foo');
el.style.font = '600 15px serif';
console.log(el.style.font);

Safari-从Canvas上下文中检索字体属性时缺少字体粗细组件

1 个答案: