Html2canvas: ne prend pas en charge la propriété font-family avec plusieurs valeurs

Créé le 13 févr. 2016 · 7Commentaires · Source: niklasvh/html2canvas

En utilisant 0.5.0-beta4, merci beaucoup pour ce super module!

Le problème que j'ai, c'est que j'ai un cours
.class { font-family: "somefont", "Arial" }
là où "somefont" ne s'applique pas, le résultat final est des éléments qui sont .class seraient rendus en utilisant Arial dans la page, mais dans le canevas, la police par défaut est appliquée à la place.

Une idée?

Bug

Source

rayax86

Commentaire le plus utile

J'ai trouvé la raison: le parent de canvas doit avoir une déclaration de police explicite comme ceci:
.container { font-family: Roboto, "Helvetica Neue", sans-serif; }

eZ0 le 18 févr. 2016

👍5 🎉2 😄2

Tous les 7 commentaires

J'ai le même problème.

Ceci est la police Roboto, dans Google Chrome Canary
screen shot 2016-02-18 at 15 18 27

Ceci est une image rendue

eZ0 le 18 févr. 2016

J'ai trouvé la raison: le parent de canvas doit avoir une déclaration de police explicite comme ceci:
.container { font-family: Roboto, "Helvetica Neue", sans-serif; }

eZ0 le 18 févr. 2016

👍5 🎉2 😄2

La jointure / division dans CanvasRenderer.prototype.font supprimait les polices supplémentaires. J'ai soumis un correctif pour cela

jordan314 le 12 mai 2016

👍1

Je ne sais pas si cela est lié, mais ici, je pense que je vois la police correctement rendue, mais ensuite superposée avec une police erronée?

rsbondi le 13 juin 2016

@ eZ0 vous avez raison! Je vous remercie!
Comme vous l'avez dit, j'ai mis font-family: arial à l'élément parent du canevas et fonctionne !.

Je vous remercie! Je vous remercie!

getJv le 28 sept. 2016

Doit être corrigé dans https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0

niklasvh le 12 déc. 2017

🎉1

ne fonctionne pas, j'ai la même erreur

rendu par

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

        document.body.appendChild(canvas)

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

Les polices personnalisées chargées depuis le serveur (et non CORS) ne sont pas rendues. Fichier css basé sur la police utilisée comme police de caractère pour Liberation Serif