Illustrator SVG dosyasında yazı tipini koruma

Merhaba Illustrator uygulamasında yeniyim ve "Skia-Regular" fontunu kullanan bir resim oluşturdum. Ancak bu görüntüyü .svg biçiminde kaydettiğimde font türünü değiştiriyor. Ve .svg biçimindeki dosyayı tarayıcıda açtığımda yazı tipi tamamen farklı. Birisi lütfen bana neyi yanlış yaptığımı söyleyebilir mi? Ben de .svg dosyasını notepad ++ 'da açtım ve font-family = "' Skia-Regular 'yazıyor ama yine de font Skia Regular değil. Her şeyden memnun kalacaksınız. Teşekkürler.

Görüntü referans için ekli

Metnin her durumda aynı görünüme sahip olduğundan emin olmak istiyorsanız -

İlk önce, svg olarak kaydetmeden önce metni genişletebilirsiniz.

İkinci olarak, kaydetme iletişim kutusunun yazı tipi kısmında "tasarıma dönüştür" seçeneğine basabilirsiniz.

Yazı tipinin gerçek yazı tipine doğru şekilde işlenmemesinin nedeni, SVG'nin Illustrator uygulamasını kullanarak kaydedilmesidir. Uygulama, tasarımı otomatik olarak koda dönüştürür. Ve yakından gözlenirse, kod içindeki font adı, sistemde yüklü olan gerçek fontla eşleşmiyor.

Yazı tipi oluşturma sorununun üstesinden gelmek için SVG kodunu Illustrator'dan kopyalamanız ve sisteminizde yüklü yazı tipinin adıyla eşleşmesi için yazı tipi adını değiştirmeniz gerekir. (Örn: Illustrator "Arial-Regular" dan gelen SVG kodu içindeki font adı, ancak sisteminizde yüklü olan fontun adı "Arial Regular". Burada, Font-Family'i "Arial Regular" olarak değiştirmek için kodu değiştirmeniz gerekecektir. ".)

Bu, yazı tiplerini ana hatlarına dönüştürmeye gerek kalmadan probleminizi çözecektir.

Bu yardımcı olur umarım!

Sizin de belirttiğiniz gibi, yazı tipi, svg'yi açmaya çalışan sistemde bulunabilecek (veya bulunmayabilecek) bir yazı tipi dosyasına bir referanstır . Çözüm, türünüzü yollara dönüştürerek eğrilerin dosya içinde açıkça depolanmasını sağlamaktır.

Tarayıcı neden başvurmaya çalıştığınız yazı tipi yüzünün farkında olmayabilir, bu açık değildir, çünkü svg dosyasını oluştururken kullandığınız bilgisayar üzerinde test yaptığınızı farz ediyorum. Yazı tipinin Illustrator uygulamasında seçilebilir ancak işletim sistemi düzeyinde resmi olarak yüklenmemiş olması olasıdır.

web için arşiv:

1. google fontlarını kullanın.
2. sadece iki yazı tipi ailesi kullanarak maks.

Dışa aktar: fontlar: (metin: svg, subconjunto: none). özellikleri svg: (stil öğesi).

Ortaya çıkan dosyanın stilleri içinde düzenleyin:

1. "@import" satırını ekleyin.
2. "px" i bütün font boyutuna ekle.
3. yazı tipi adını yeniden adlandırın.

sonuç:

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

Muhtemelen PC'nizde yerel olarak kullanılabilen font ailesi (Skia-Regular) font dosyası bulunmuyor. Bu yüzden, SVG dosyanızı tarayıcınızda açtığınızda, çoğu zaman Times New Roman olan varsayılan sistem fontunu kullanarak oluşturur. Birkaç geçici çözüm vardır:

1. Google Fonts API’sına atıfta bulunmak için @import komutunu kullanın (ancak yakalama, SVG resimlerinizi web sitenize nasıl yerleştirdiğinize bağlı olarak, bu yalnızca satır içi SVG ve nesne etiketi SVG kullanıyorsanız işe yarar)
2. Yazı tiplerinizi yola dönüştürün (bu, dosya boyutunu artırır ve ClearType görüntülemesini kaybettiğinizde bulanık metinlerle sonuçlanır )
3. Nano kullanarak fontları SVG dosyanıza gömme

SVG'de özel yazı tiplerini kullanma hakkında daha fazla bilgiyi burada bulabilirsiniz: https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/