Html2canvas: tidak mendukung properti font-family dengan banyak nilai

Dibuat pada 13 Feb 2016 · 7Komentar · Sumber: niklasvh/html2canvas

Menggunakan 0.5.0-beta4, terima kasih banyak untuk modul hebat ini!

Masalah yang saya hadapi adalah, katakanlah saya ada kelas
.class { font-family: "somefont", "Arial" }
di mana "somefont" tidak berlaku, hasil akhirnya adalah elemen yang .class akan dirender menggunakan Arial di halaman, tetapi di kanvas, font default diterapkan sebagai gantinya.

Ada ide?

Bug

Sumber

rayax86

Komentar yang paling membantu

Saya menemukan alasannya: orang tua kanvas harus memiliki deklarasi font eksplisit seperti ini:
.container { font-family: Roboto, "Helvetica Neue", sans-serif; }

eZ0 pada 18 Feb 2016

👍5 🎉2 😄2

Semua 7 komentar

Saya mengalami masalah yang sama.

Ini adalah font Roboto, di Google chrome canary
screen shot 2016-02-18 at 15 18 27

Ini adalah gambar yang diberikan

eZ0 pada 18 Feb 2016

Saya menemukan alasannya: orang tua kanvas harus memiliki deklarasi font eksplisit seperti ini:
.container { font-family: Roboto, "Helvetica Neue", sans-serif; }

eZ0 pada 18 Feb 2016

👍5 🎉2 😄2

Gabungan / pemisahan di CanvasRenderer.prototype.font menghapus font tambahan. Saya mengirimkan perbaikan untuk itu

jordan314 pada 12 Mei 2016

👍1

Saya tidak yakin apakah ini terkait, tetapi di sini saya pikir saya melihat font yang diberikan dengan benar, tetapi kemudian dilapisi dengan font yang salah?

rsbondi pada 13 Jun 2016

@ eZ0 Anda benar! Terima kasih!
Seperti yang Anda katakan, saya meletakkan font-family: arial pada elemen induk kanvas dan bekerja !.

Terima kasih! Terima kasih!

getJv pada 28 Sep 2016

Harus diperbaiki di https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0

niklasvh pada 12 Des 2017

🎉1

tidak berfungsi, saya mendapat kesalahan yang sama

diberikan oleh

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

        document.body.appendChild(canvas)

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

Font yang dimuat khusus dari server (bukan CORS) tidak dirender. File css berbasis font-based64 digunakan sebagai font-face ke Liberation Serif