Bagaimana cara menyematkan Font Web Google ke dalam SVG?


48

Saya sedang menulis artikel di situs saya tentang kelebihan teknologi web baru, antara lain HTML5, CSS3 dan SVGs, salah satu kelebihan dari yang terakhir adalah kemampuan untuk memilih teks dalam apa yang sebenarnya merupakan gambar yang efektif.

Saya baru mengenal SVG, dan baru saja membuat grafik yang layak pertama di Illustrator. Saya telah menyematkannya ke halaman dengan skrip GWF untuk font Ubuntu di dalam tag. Ternyata, font Ubuntu ditampilkan dengan benar dalam teks biasa, tetapi untuk trik ini berfungsi di SVG, skrip Google harus tertanam dalam SVG itu sendiri. Bagaimana saya bisa melakukan ini?


1
Satu catatan penting mengenai solusi berbasis @import: mereka tidak bekerja untuk gambar latar belakang. Anda harus menanamkan font melalui base64 atau menggunakan tag gambar / objek sebagai gantinya.
Mickey

Jawaban:


39

Anda menanamkan font dalam CSS dengan menggunakan pengkodean base64. Anda bisa menerapkan gaya dalam dokumen SVG mirip dengan CSS dengan menggunakan <style />elemen. Jadi jika Anda memiliki font WOFF, Anda akan menanamkannya seperti ini:

<style>
@font-face {
    font-family: "Sample font";
    src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>

Di mana ...data font yang disandikan base64.

Anda dapat menemukan contohnya dengan melihat stylesheet Typekit. Saya tidak yakin apakah jenis pantomimnya font/woffbenar, karena saya juga pernah melihat orang-orang mengatakan itu seharusnya application/font-woff. Meskipun font/woff, font/truetype, font/opentype, dll tampaknya menjadi lebih populer.

Atau, Anda dapat mengambil versi SVG dari font web dan menanamkan marka deskripsi font SVG di dalam dokumen Anda (meskipun dukungan browser masih sangat terbatas seperti yang dicatat oleh Luke dalam komentar).

Namun, Anda juga harus dapat menautkan ke font eksternal sesuai dengan spesifikasi SVG . Itu tampaknya menjadi solusi terbaik jika Anda akan memiliki beberapa dokumen SVG yang mereferensikan font itu.


2
Jenis MIME yang benar untuk .woff sekarang application/font-woff. stackoverflow.com/a/5142316/90674
sshow

3
Mengenai "Anda benar-benar dapat mengambil versi SVG dari font web dan menanamkan marka deskripsi font SVG di dalam dokumen Anda", Anda harus menyadari bahwa "Font SVG saat ini hanya didukung di Safari dan Browser Android." Lihat developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts (juga caniuse.com/#feat=svg-fonts )
Luke

1
Utas ini sangat membantu, tetapi pertanyaannya kemudian adalah bagaimana mengkonversi font menjadi base64. Situs ini transfonter.org banyak membantu dan memungkinkan seseorang untuk memilih hanya sebagian dari font yang akan dikonversi, sehingga dapat mengurangi ukuran file.
Fabien Snauwaert

Jawaban ini tampak menggoda, tetapi pada akhirnya saya menemukan langkah-langkah ini lebih mudah, jadi saya membagikannya: graphicdesign.stackexchange.com/a/124900/45239
Ryan

Ketika saya membuka svg itu di adobe ilustrator, font tidak memuat. Ada bantuan?
Aamir Nakhwa

13

Sebuah <defs>bagian seperti

<defs>
  <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>

bekerja.


13
Di browser web saat ini (Februari 2016), ini hanya berfungsi ketika memuat file SVG stand-allone. Lihat marians.github.io/test-webfonts-in-svg/test.svg untuk contoh. Membuka SVG yang sama dalam halaman HTML, font tidak dimuat / dirender. Gunakan marians.github.io/test-webfonts-in-svg sebagai contoh.
Marian

1
Baik laman SVG dan HTML yang berdiri sendiri tampaknya berfungsi sama di Versi Chrome 73.0.3683.103 (Bangun Resmi) (64-bit).
Paul Grime

Ini memuat font ketika saya membuka svg di browser, tetapi ketika saya membuka file svg yang sama di Adobe Illustrator, itu tidak memuat font. Ada bantuan?
Aamir Nakhwa

3

Anda dapat menanamkan Google Web Fonts ke SVG Anda secara langsung menggunakan Nano . Secara otomatis memindai SVG Anda dan secara selektif menanamkan hanya font yang diperlukan, memastikan bahwa font Ubuntu Anda terlihat sama pada semua browser modern. Dalam kasus saya, saya perlu Roboto untuk tertanam dalam SVG saya:

masukkan deskripsi gambar di sini

Penafian: Saya dengan tim di belakang Nano, dan kami juga, telah menghadapi masalah yang sama sebelumnya sehingga memutuskan untuk menggaruk gatal kita sendiri dengan membangun Nano. Semoga ini bisa membantu!

Sunting: Berikut penjelasan singkat tentang apa yang terjadi di balik layar:

Untuk menanamkan font di SVG, Anda harus terlebih dahulu tahu keluarga font apa yang digunakan. Maka Anda perlu menemukan file font ini dan mengunduhnya. Setelah diunduh, Anda harus mengonversi pengkodean reguler, tebal, miring, dan miring tebal menjadi basis 64. Jika Anda melakukannya secara manual, ini merupakan pekerjaan yang sangat besar, lebih dari sejumlah besar file, untuk mengetahui file mana yang menggunakan huruf tebal dan mana yang tidak. Maka Anda harus menyalin semua 4 basis 64 string yang dikodekan ke SVG Anda.

Itu sebabnya kami membuat Nano dan memastikannya memindai SVG secara otomatis dan hanya memasukkan font yang digunakan. Misalnya, jika huruf tebal tidak digunakan atau jika tidak ada teks, maka font tidak akan disematkan. Yang perlu Anda lakukan adalah drag dan drop SVG Anda ke Nano dan itu bekerja seperti pesona! Anda dapat mempelajari lebih lanjut di sini: https://vecta.io/blog/making-svg-easier-to-use


OK, bagus terlihat bagus. Sayangnya mengunggah ke situs Wordpress yang cukup senang menerima SVG sebelum sekarang tidak akan "Maaf, jenis file ini tidak diizinkan karena alasan keamanan." - apa yang harus saya kembalikan agar pekerjaan ini berhasil?
Chris Pink

1

Ini mungkin terlalu menyederhanakan, tetapi apakah Anda mempertimbangkan untuk mengunduh font sebagai file zip dari google dan kemudian membiarkan Illustrator mengubahnya sesuai kebutuhan ke dalam output file SVG Anda?

Ini hanya teoretis karena saya belum mencobanya, tetapi secara teori sepertinya akan berhasil.


0

Tambahkan <desc>tag setelah berikut ini

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>

mengapa menyertakan begitu banyak font google? Bahkan tidak semuanya atau yang paling sering saya lihat dan akan menambah berat keseluruhan SVG.
MrMesees

Ini memuat font ketika saya membuka svg di browser, tetapi ketika saya membuka file svg yang sama di Adobe Illustrator, itu tidak memuat font. Ada bantuan?
Aamir Nakhwa

0

MEMPERBARUI jawaban saya. Saya sekarang lebih suka jawaban yang berbeda pada halaman ini, yaitu menggunakan Nano: https://graphicdesign.stackexchange.com/a/121950/45239

Dengan asumsi Anda telah mengunduh dan menginstal font web pada sistem Anda dan telah membuat SVG (mungkin menggunakan banyak langkah yang sama seperti yang saya jelaskan di bawah ini tetapi tidak memilih "Font: Convert To Outlines"), Anda dapat mengunggah SVG ke Nano dan lihat opsi "Embed font: Yes", dan klik Download.

Jawaban saya sebelumnya:

Jika Anda rela berkorban dengan memilih teks dan SEO:

  1. Unduh font web.
  2. Instal secara lokal.
  3. Buka Adobe Illustrator
  4. Ketikkan teks Anda.
  5. File> Ekspor> Ekspor Sebagai ...
  6. Pilih ".SVG"
  7. Pilih pengaturan ini:

    • Styling: Gaya Inline
    • Font: Konversi Ke Garis
    • Gambar: Pertahankan
    • ID Objek: Nama Lapisan
    • Desimal: 2
    • (diaktifkan) Minify
    • (diaktifkan) Responsif
  8. Secara opsional unggah svg yang dihasilkan ke https://vecta.io/nano (Itu dapat mengurangi ukuran file saya sebesar 8,2%)


Sayangnya 'convert to outlines' bukan pilihan bagus untuk ukuran teks yang lebih kecil.
Chris Pink

@ ChrisPink, ya Anda benar!, Silakan bagikan jika Anda telah menemukan opsi lain untuk ukuran font kecil
Super Model

1
@SuperModel Saya menggunakan Nano dengan sangat sukses, dengan font mengambil gaya dari dokumen terlampir. Upaya pertama saya gagal tetapi dengan bantuan tim Nano kami berhasil itu adalah kasus memastikan header SVG tetap utuh.
Chris Pink
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.