Html2canvas: 不支持具有多个值的font-family属性

创建于 2016-02-13 · 7评论 · 资料来源: niklasvh/html2canvas

使用0.5.0-beta4，非常感谢您提供的出色模块！

我遇到的问题是，例如我上了一堂课
.class { font-family: "somefont", "Arial" }
在不使用“ somefont”的情况下，最终结果是将使用Arial在页面中呈现.class元素，但在画布中将使用默认字体。

任何想法？

Bug

资料来源

rayax86

最有用的评论

我发现了原因：canvas的父级必须具有显式字体声明，如下所示：
.container { font-family: Roboto, "Helvetica Neue", sans-serif; }

eZ0 于 2016-02-18

👍5 🎉2 😄2

所有7条评论

我有同样的问题。

这是Roboto字体，在Google chrome canary中
screen shot 2016-02-18 at 15 18 27

这是渲染图像

eZ0 于 2016-02-18

我发现了原因：canvas的父级必须具有显式字体声明，如下所示：
.container { font-family: Roboto, "Helvetica Neue", sans-serif; }

eZ0 于 2016-02-18

👍5 🎉2 😄2

CanvasRenderer.prototype.font中的join / split正在剥离其他字体。我为此提交了一个修复程序

jordan314 于 2016-05-12

👍1

我不确定这是否相关，但是在这里我想我看到的字体渲染正确，但是随后使用了错误的字体呢？

rsbondi 于 2016-06-13

@ eZ0你是正确的！谢谢！
如您所说，我将font-family: arial放在画布父元素上并且可以使用！

谢谢！谢谢！

getJv 于 2016-09-28

应该在https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0中修复

niklasvh 于 2017-12-12

🎉1

不起作用，我遇到了同样的错误

呈现者

html2canvas(this.$refs.iFr, { useCORS: true }).then(canvas => {
        console.log(canvas)

        document.body.appendChild(canvas)

        canvas.toBlob(function(blob) {
          saveAs(blob, 'Dashboard.png')
        })
      })

从服务器（非CORS）加载的自定义字体不会呈现。使用的字体-based64 css文件作为Liberation Serif的字体

ruslankonev 于 2018-10-09

👍1

此页面是否有帮助？

0 / 5 - 0 等级

Html2canvas: 不支持具有多个值的font-family属性

最有用的评论

所有7条评论

相关问题