Google Web Yazı Tiplerini bir SVG'ye nasıl eklerim?

Sitemde yeni web teknolojilerinin avantajları hakkında bir yazı yazıyorum, diğerleri arasında HTML5, CSS3 ve SVG'ler;

SVG'lerde yeniyim ve Illustrator'daki ilk iyi grafiğimi yaptım. Etiketteki Ubuntu yazı tipi için GWF komut dosyasının bulunduğu bir sayfaya gömdüm. Görünüşe göre, Ubuntu fontu normal metinlerde düzgün görüntüleniyor, ancak bu numara SVG'de çalışabilmesi için Google betiğinin SVG'ye gömülmesi gerekiyor. Bunu nasıl yapabilirim?

Base64 kodlamasını kullanarak fontları CSS'ye gömün. Bir <style />öğeyi kullanarak CSS'ye benzer SVG belgelerinde stilleri uygulayabilirsiniz . Eğer bir WOFF fontunuz varsa, bunu şu şekilde yerleştirirsiniz:

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

...Base64 kodlanmış yazı tipi verileri nerede .

Bunun örneklerini Typekit'in stil sayfalarına bakarak bulabilirsiniz. Mime türünün font/woffdoğru olup olmadığından emin değilim , çünkü insanların da olması gerektiğini iddia ettiklerini gördüm application/font-woff. Gerçi font/woff, font/truetype, font/opentypevb daha popüler olduğu görülüyor.

Alternatif olarak, aslında web fontunun SVG sürümünü alabilir ve SVG fontunun açıklama işaretini belgenizin içine gömebilirsiniz (tarayıcı desteği yine de Luke'un yorumlarda yazdığı gibi, yine de çok sınırlıdır).

Bununla birlikte, SVG belirtimine göre harici bir fontla da bağlantı kurmanız gerekir . Bu yazı tipini referans alan birden fazla SVG belgeniz olacaksa, bu en iyi çözüm gibi görünüyor.

<defs>Gibi bir bölüm

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

Eserleri.

Doğrudan Nano kullanarak Google Web Fonts'u SVG'nize gömebilirsiniz . SVG'nizi otomatik olarak tarar ve yalnızca istenen yazı tiplerini seçerek gömerek Ubuntu yazı tiplerinin tüm modern tarayıcılarda aynı görünmesini sağlar. Benim durumumda Roboto'nun SVG'ye yerleştirilmesi gerekiyordu:

Feragatname: Nano'nun arkasındaki takımdayım ve daha önce de aynı problemle karşılaştık, bu yüzden Nano'yu kurarak kendi kaşıntılarımızı çizmeye karar verdik. Umarım bu yardımcı olur!

Düzenleme: İşte sahnenin arkasında ne olduğuna dair kısa bir açıklama:

SVG'ye font gömmek için önce hangi font ailelerinin kullanıldığını bilmeniz gerekir. O zaman bu font dosyalarını bulup indirmeniz gerekir. Bir kere indirildikten sonra, düzenli, kalın, italik ve kalın italikleri temel 64 kodlamaya dönüştürmeniz gerekir. El ile yapıyorsanız, hangi dosyanın kalın kullandığını ve hangilerinin kullanılmadığını bilmek çok sayıda dosya üzerinde çok fazla bir iştir. Sonra 4 temel 64 kodlanmış dizenin tümünü SVG'nize kopyalamanız gerekir.

Bu yüzden Nano'yu oluşturduk ve SVG'yi otomatik olarak taradığından ve yalnızca kullanılan fontları eklediğinden emin olduk. Örneğin, kalın kullanılmazsa veya metin yoksa, yazı tipleri gömülmez. Yapmanız gereken tek şey SVG'nizi Nano'ya sürükleyip bırakmak ve cazibeye benziyor! Buradan daha fazla bilgi edinebilirsiniz: https://vecta.io/blog/making-svg-easier-to-use

Bu işlem çok basitleştirilebilir, ancak fontu google'dan zip dosyası olarak indirmeyi ve ardından Illustrator uygulamasının onu SVG dosya çıktınıza dönüştürmesine izin vermeyi düşündünüz mü?

Bu sadece bunu henüz denemediğim için teorik, fakat teoride işe yaramış gibi görünüyor.

<desc>Etiketinden sonra aşağıdakileri ekleyin

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

Cevabımı güncelleyin. Şimdi bu sayfadaki Nano'yu kullanmak için farklı bir yanıt tercih ediyorum: https://graphicdesign.stackexchange.com/a/121950/45239

Sisteminize bir web fontu indirip yüklediğinizi ve bir SVG oluşturduğunuzu ve (belki de aşağıda açıkladığım adımların çoğunu kullanarak ancak "Yazı Tipi: Anahatlara Dönüştür" ü seçerek) varsaydığınızı varsayarak, SVG'yi Nano'ya yükleyebilirsiniz. ve "Yazı tipi göm: Evet" seçeneğine bakın ve İndir'i tıklayın.

Önceki cevabım:

Seçilebilir metin ve SEOya sahip olmayı feda etmeye istekli iseniz:

1. Web fontunu indirin.
2. Yerel olarak yükleyin.
3. Adobe Illustrator'ı açın
4. Mesajını yaz.
5. Dosya> Dışa Aktar> Farklı Dışa Aktar…
6. ".SVG" yi seçin

7. Bu ayarları seç:

   • Stil: Satır İçi Stil
   • Yazı tipi: Anahatlara Dönüştür
   • Resimler: Koru
   • Nesne Kimlikleri: Katman İsimleri
   • Ondalık: 2
   • (etkin) Küçült
   • (etkin) Duyarlı

8. İsteğe bağlı olarak svg dosyasını https://vecta.io/nano'ya yükle (Dosya büyüklüğümü% 8,2 azaltabildi)