代码之家 › 专栏 › 技术社区 › jancha

safari-从画布上下文检索字体属性时缺少字体权重组件

html5-canvas safari javascript

jancha · 技术社区 · 6 年前

我们正在使用Canvas上下文对象从 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

J小提琴: http://jsfiddle.net/1neqar7k/5/

问题是,在狩猎中, font-weight 组件丢失。我做错什么了吗?还是这是一只野生动物的虫子?铬合金效果很好。

1 回复 | 直到 6 年前

Kaiido NickSlash 6 年前

这确实是一个错误,因为 the specs 问这个问题,

获取时,字体属性必须返回上下文当前字体的序列化形式(没有“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来做这个工作…

CSS解析和序列化更好地在作为CSSOM第一个目标的API中实现,例如元素。
因此,如果不是使用画布上下文,而是使用一个虚拟元素,那么它可以在任何地方工作,如您所愿:

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

推荐文章

Aaron · IdentityServer4和运行在iOS 9.3.5上的客户端(禁用JavaScript)

6 年前

thank_K · 检测safari并停止脚本

6 年前

mattaningram · 在Safari中,框阴影颜色函数中的CSS自定义属性渲染不正确

6 年前

Dockson · iOS Safari 11.3上navigator中没有服务人员

6 年前

Emrah Åentürk · pc和移动设备之间的角度5日期时区差异

6 年前

acb1980 · 上次更新后,Safari(iOS和OS X)上的Ajax文件上传中断

6 年前

Archna Rangrej · 如何在Safari中录制HTML5视频?

6 年前

akash · 我的html背景视频未在safari中播放

7 年前

DsXack · 如何在iOS和macOS上使用Safari中的网络摄像头录制视频?

7 年前

Charlie McShane · Flex Wrap+TransformY在Safari中不起作用

7 年前