Mempertahankan jenis font dalam file ilustrator SVG


24

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 Gambar terlampir

Jawaban:


31

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"


2
Bagian kedua jelas. Bisakah Anda jelaskan bagian pertama, bagaimana saya "Perluas" teks?
Rizwan606

5
@ Rizwan606 Anda memilih teks dengan alat seleksi dan tekan menu Object dan di sana Anda menekan Expand (itu akan mengubah teks menjadi bentuk), atau Anda memilih teks dan kemudian Klik kanan dan pilih Create Outlines
Ilan

5
Untuk memperjelas jawaban ini, Anda tidak perlu melakukan keduanya. Metode mana pun akan bekerja secara independen.
Simon Woodside

⚙️ (Pengaturan lanjutan untuk jenis file yang diekspor) → SVG → Font ke “Convert To Outlines.”
Константин Ван

9

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!


1
Ini persis seperti itu! Illustrator menggunakan nama PostScript untuk font ketika Anda melakukan File> Simpan dan pilih SVG. Anda berakhir dengan "MyriadPro-Regular" alih-alih "Myriad Pro" seperti yang Anda harapkan dan browser Anda tidak berfungsi dengan nama PostScript seperti yang dilakukan Illustrator. Solusinya adalah menggunakan File> Ekspor untuk menyimpan SVG karena akan mengekspor nama keluarga yang tepat alih-alih nama PostScript.
Michael Thompson

@Michael Thompson ketika saya memilih File> Ekspor, SVG bukan salah satu opsi. Saya menggunakan CS5. Apakah ini opsi di versi sebelumnya / yang lebih baru?
Max Starkenburg

@ MaxStarkenburg: menu Ekspor berubah secara liar antara versi. Dalam versi yang lebih baru ada tiga cara untuk menyimpan / mengekspor ke SVG: File> Save As> (pilih tipe SVG); File> Ekspor> Ekspor Sebagai ...> (pilih jenis SVG) dan File> Ekspor untuk Layar> (tambahkan format SVG).
Michael Thompson

4

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.


Ya saya menguji pada komputer yang sama di mana saya membuat file svg. Dan bisakah Anda memperbaiki saya jika saya salah. Saya mengambil bagian pertama dari balasan karena saya harus memberikan jalur khusus ke font .ttf file Skia Regular di properti Font-Family?
Rizwan606

Terserah browser untuk mencocokkan nama jenis huruf dengan font yang diinstal, jadi "tidak" Anda tidak akan memberikan jalan ke ttf. Referensi ini mirip dengan sintaks font-wajah css, yang memungkinkan daftar gaya font-family yang dipisahkan oleh koma. Browser dapat mengidentifikasi nama font secara berbeda.
horatio

Perhatikan bahwa untuk logo dan masalah yang terdistribusi seperti ini, (pdfs dll) di mana jenis huruf penting, adalah ide yang baik untuk menyematkan font atau mengonversi ke path. Jadi menyelesaikan referensi ini mungkin bukan solusi yang baik karena Anda mengandalkan pihak ke-3 untuk menginstal tipografi yang tepat
horatio

2

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;}


1
Jawaban ini terlalu singkat. Saya bahkan tidak tahu apakah ini merujuk ke file SVG atau solusi lain ...
jiggunjer

1

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/

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.