Jak osadzić czcionki internetowe Google w pliku SVG?

Piszę artykuł na mojej stronie o zaletach nowych technologii internetowych, między innymi HTML5, CSS3 i SVG, z których jedną z zalet jest możliwość zaznaczania tekstu na obrazie, który w innym przypadku byłby efektywny.

Jestem nowy w SVG i właśnie stworzyłem swoją pierwszą przyzwoitą grafikę w programie Illustrator. Osadziłem go na stronie ze skryptem GWF dla czcionki Ubuntu w znaczniku. Jak się okazuje, czcionka Ubuntu wyświetla się poprawnie w zwykłym tekście, ale aby ta sztuczka działała w SVG, skrypt Google musi być osadzony w samym SVG. Jak mogę to zrobić?

Osadzasz czcionki w CSS przy użyciu kodowania base64. Możesz zastosować style w dokumentach SVG podobnych do CSS za pomocą <style />elementu. Więc jeśli masz czcionkę WOFF, możesz osadzić ją w następujący sposób:

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

Gdzie ...są dane czcionki zakodowane w standardzie base64.

Możesz znaleźć przykłady tego, przeglądając arkusze stylów Typekit. Nie jestem pewien, czy typ MIME font/woffjest poprawny, ponieważ widziałem również, że ludzie twierdzą, że tak powinno być application/font-woff. Chociaż font/woff, font/truetype, font/opentype, itd. Wydają się być bardziej popularne.

Alternatywnie, możesz wziąć wersję SVG czcionki internetowej i osadzić znacznik opisu czcionki SVG w dokumencie (chociaż obsługa przeglądarki jest nadal bardzo ograniczona, jak zauważa Luke w komentarzach).

Powinieneś także mieć możliwość linkowania do zewnętrznej czcionki zgodnie ze specyfikacją SVG . To wydaje się być najlepszym rozwiązaniem, jeśli będziesz mieć wiele dokumentów SVG odnoszących się do tej czcionki.

<defs>Sekcja jak

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

Pracuje.

Możesz osadzić czcionki internetowe Google w pliku SVG bezpośrednio za pomocą Nano . Automatycznie skanuje plik SVG i selektywnie osadza tylko wymagane czcionki, dzięki czemu czcionki Ubuntu wyglądają tak samo we wszystkich nowoczesnych przeglądarkach. W moim przypadku potrzebowałem osadzenia Roboto w mojej SVG:

Oświadczenie: Jestem z zespołem stojącym za Nano, i my również mieliśmy do czynienia z tym samym problemem, dlatego postanowiliśmy podrapać swój własny świąd, budując Nano. Mam nadzieję, że to jest pomocne!

Edycja: Oto krótkie wyjaśnienie tego, co dzieje się za sceną:

Aby osadzić czcionki w SVG, najpierw musisz wiedzieć, jakie rodziny czcionek są używane. Następnie musisz znaleźć te pliki czcionek i pobrać je. Po pobraniu musisz przekonwertować zwykłe, pogrubione, kursywa i pogrubione kursywa na kodowanie podstawowe 64. Jeśli robisz to ręcznie, to ogrom pracy, na dużej liczbie plików, aby wiedzieć, który plik używa pogrubienia, a który nie. Następnie musisz skopiować wszystkie 4 ciągi kodowane 64 base do swojego SVG.

Dlatego budujemy Nano i upewniamy się, że automatycznie skanuje SVG i wstawia tylko używane czcionki. Na przykład, jeśli pogrubienie nie zostanie użyte lub jeśli nie będzie tekstu, czcionki nie zostaną osadzone. Wystarczy przeciągnąć i upuścić plik SVG do Nano, a to działa jak urok! Możesz dowiedzieć się więcej tutaj: https://vecta.io/blog/making-svg-easier-to-use

Może to być nadmierne uproszczenie, ale czy zastanawiałeś się nad pobraniem czcionki jako pliku zip z google, a następnie pozwoleniem programowi Illustrator przekonwertować ją w razie potrzeby na plik wyjściowy SVG?

Jest to tylko teoretyczne, ponieważ jeszcze tego nie próbowałem, ale teoretycznie wydaje się, że działa.

Dodaj następujący <desc>tag po

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

AKTUALIZACJA do mojej odpowiedzi. Wolę teraz inną odpowiedź na tej stronie, którą jest użycie Nano: https://graphicdesign.stackexchange.com/a/121950/45239

Zakładając, że pobrałeś i zainstalowałeś czcionkę internetową w swoim systemie i utworzyłeś SVG (być może wykonując wiele takich samych kroków, jak opisałem poniżej, ale nie wybrałem „Czcionka: Konwertuj na kontury”), możesz przesłać SVG do Nano i zobacz opcję „Osadź czcionkę: tak” i kliknij Pobierz.

Moja poprzednia odpowiedź:

Jeśli chcesz poświęcić, mając do wyboru tekst i SEO:

1. Pobierz czcionkę internetową.
2. Zainstaluj lokalnie.
3. Otwórz Adobe Illustrator
4. Wpisz swój tekst.
5. Plik> Eksportuj> Eksportuj jako…
6. Wybierz „.SVG”

7. Wybierz te ustawienia:

   • Stylizacja: styl wbudowany
   • Czcionka: Konwertuj na kontury
   • Obrazy: zachowaj
   • Identyfikatory obiektów: nazwy warstw
   • Dziesiętny: 2
   • (włączone) Minify
   • (włączone) Responsive

8. Opcjonalnie prześlij wynikowy plik SVG na https://vecta.io/nano (Był w stanie zmniejszyć rozmiar mojego pliku o 8,2%)