Mempertahankan jenis font dalam file ilustrator SVG

Hai, saya baru mengenal ilustrator dan membuat gambar yang menggunakan font "Skia-Regular". Tetapi ketika saya menyimpan gambar itu dalam format .svg , itu mengubah jenis font. Dan ketika saya membuka file berformat .svg di browser, fontnya sangat berbeda. Adakah yang bisa memberitahu saya apa yang saya lakukan salah. Saya telah membuka file .svg di notepad ++ juga dan dikatakan font-family = "'Skia-Regular' dan juga masih font bukan Skia Regular. Setiap bantuan akan dihargai. Terima kasih

Gambar juga dilampirkan untuk referensi

Jika Anda ingin memastikan bahwa teks akan memiliki tampilan yang sama di setiap kasus -

Pertama, Anda dapat Perluas teks sebelum menyimpan sebagai svg

Kedua, di bagian font dari dialog penyimpanan Anda dapat menekan "convert to outline"

Alasan mengapa font tidak merender dengan benar ke jenis font yang sebenarnya adalah karena, ketika SVG disimpan menggunakan aplikasi Illustrator. Aplikasi secara otomatis mengubah desain menjadi kode. Dan jika diamati dengan seksama nama font dalam kode tidak cocok dengan font yang sebenarnya diinstal dalam sistem.

Untuk mengatasi masalah rendering font, Anda perlu menyalin kode SVG dari Illustrator dan memodifikasi nama font agar sesuai dengan nama font yang dipasang di sistem Anda. (Mis: Nama font dalam kode SVG yang berasal dari Illustrator "Arial-Regular", tetapi nama font yang dipasang di sistem Anda adalah "Arial Regular". Di sini Anda perlu mengubah kode untuk menjadikan Font-Family sebagai "Arial Regular") ".)

Ini akan menyelesaikan masalah Anda tanpa perlu mengubah font menjadi garis besar.

Semoga ini membantu!

Seperti yang Anda perhatikan, jenis huruf adalah referensi ke file font yang mungkin (atau mungkin tidak) tersedia untuk sistem yang mencoba untuk membuka svg. Solusinya adalah mengubah tipe Anda menjadi path sehingga kurva disimpan secara eksplisit dalam file.

Mengenai mengapa browser mungkin tidak mengetahui wajah font yang Anda coba rujuk, itu tidak jelas karena saya menganggap Anda sedang menguji pada komputer yang sama yang Anda gunakan saat membuat file svg. Masuk akal bahwa font dapat dipilih dalam Illustrator tetapi tidak diinstal secara formal di tingkat OS.

arsip untuk web:

1. gunakan font google.
2. hanya menggunakan maksimal dua keluarga font.

Ekspor: font: (teks: svg, subconjunto: tidak ada). properties svg: (elemen style).

dalam gaya file yang dihasilkan, edit:

1. lampirkan baris "@import".
2. lampirkan "px" ke semua ukuran font.
3. ganti nama font.

hasil:

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
body {}

.st0{fill:#868686;}
.st1{font-family:'Roboto Condensed';}
.st2{font-size:14.414px;}
.st3{letter-spacing:55px;}
.st4{fill:#1D1D1B;}
.st5{font-family:'Roboto Condensed'; font-weight: 700;}
.st6{letter-spacing:51px;}
.st7{letter-spacing:45px;}
.st8{letter-spacing:40px;}

Kemungkinannya adalah PC Anda tidak memiliki file font family font (Skia-Regular) yang tersedia secara lokal. Jadi ketika Anda membuka file SVG Anda di browser Anda, itu membuat menggunakan font sistem default yang Times New Roman sebagian besar waktu. Ada beberapa solusi:

1. Gunakan @import untuk merujuk ke Google Fonts API (tetapi tangkapannya adalah, tergantung pada bagaimana Anda menyematkan gambar SVG Anda di situs web Anda, ini hanya berfungsi dengan baik jika Anda menggunakan SVG inline & tag objek SVG)
2. Ubah font Anda menjadi path (yang meningkatkan ukuran file Anda dan menghasilkan teks buram saat Anda kehilangan rendering ClearType )
3. Sematkan font ke file SVG Anda menggunakan Nano

Anda dapat membaca lebih lanjut tentang penggunaan font khusus di SVG di sini: https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/