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

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 的 bug？在 Chrome 中运行良好。

Answer 1

这确实是一个错误，因为 the specs问一下，

On getting, the font attribute must return the serialized form of the current font of the context (with no 'line-height' component).

并且字体粗细应该是字体序列化形式的一部分，如果不是默认值(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 来完成这项工作......

CSS 解析和序列化在 CSSOM 的首要目标 API 中得到了更好的实现，例如 Element。
因此，如果您使用的是虚拟元素而不是 Canvas 上下文，那么它可以按照您的意愿在任何地方工作:

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