Html2canvas: não suporta propriedade de família de fontes com valores múltiplos

Criado em 13 fev. 2016 · 7Comentários · Fonte: niklasvh/html2canvas

Usando 0.5.0-beta4, muito obrigado por este ótimo módulo!

O problema que estou tendo é, digamos que tenho uma aula
.class { font-family: "somefont", "Arial" }
onde "alguma fonte" não se aplica, o resultado final são elementos que são .class seriam renderizados usando Arial na página, mas na tela a fonte padrão é aplicada.

Qualquer ideia?

Bug

Fonte

rayax86

Comentários muito úteis

Encontrei o motivo: o pai do canvas deve ter uma declaração de fonte explícita, como:
.container { font-family: Roboto, "Helvetica Neue", sans-serif; }

eZ0 em 18 fev. 2016

👍5 🎉2 😄2

Todos 7 comentários

Estou tendo o mesmo problema.

Esta é a fonte Roboto, no Google Chrome Canary
screen shot 2016-02-18 at 15 18 27

Esta é uma imagem renderizada

eZ0 em 18 fev. 2016

Encontrei o motivo: o pai do canvas deve ter uma declaração de fonte explícita, como:
.container { font-family: Roboto, "Helvetica Neue", sans-serif; }

eZ0 em 18 fev. 2016

👍5 🎉2 😄2

A junção / divisão em CanvasRenderer.prototype.font estava removendo fontes adicionais. Eu enviei uma correção para isso

jordan314 em 12 mai. 2016

👍1

Não estou certo se isso está relacionado, mas aqui eu acho que eu estou vendo a fonte processado corretamente, mas, em seguida, em camadas sobre com uma fonte errônea?

rsbondi em 13 jun. 2016

@ eZ0 você está correto! Obrigado!
Como você disse, coloco font-family: arial no elemento pai da tela e funciona !.

Obrigado! Obrigado!

getJv em 28 set. 2016

Deve ser corrigido em https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0

niklasvh em 12 dez. 2017

🎉1

não funciona, tenho o mesmo erro

prestado por

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

        document.body.appendChild(canvas)

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

Fontes personalizadas carregadas do servidor (não CORS) não são renderizadas. Fonte usada - arquivo css baseado em 64 como fonte para Liberation Serif