Bagaimana cara menyematkan Font Web Google ke dalam SVG?

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?

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.

Sebuah <defs>bagian seperti

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

bekerja.

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:

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

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.

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>

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%)