Jak osadzić czcionki internetowe Google w pliku SVG?


48

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


1
Jedna ważna uwaga dotycząca rozwiązań opartych na @import: nie działają one dla obrazów tła. Musisz osadzić czcionkę za pomocą base64 lub zamiast tego użyć znacznika image / object.
Mickey,

Odpowiedzi:


39

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.


2
Prawidłowy typ MIME dla .woff jest teraz application/font-woff. stackoverflow.com/a/5142316/90674
sshow

3
Jeśli chodzi o „rzeczywiście można pobrać wersję SVG czcionki internetowej i osadzić znacznik opisu czcionki SVG w dokumencie”, należy pamiętać, że „Czcionki SVG są obecnie obsługiwane tylko w przeglądarce Safari i Android”. Zobacz developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts (także caniuse.com/#feat=svg-fonts )
Łukasz

1
Wątek ten bardzo pomógł, ale pojawiło się pytanie, jak przekonwertować czcionkę na base64. Ta strona transfonter.org bardzo pomogła i pozwala wybrać tylko podzbiór czcionki do konwersji, aby zmniejszyć rozmiar pliku.
Fabien Snauwaert,

Ta odpowiedź wyglądała kusząco, ale ostatecznie uznałem te kroki za łatwiejsze, więc podzieliłem się nimi: graphicdesign.stackexchange.com/a/124900/45239
Ryan

Kiedy otwieram svg w programie Adobe Illustrator, czcionki się nie ładują. Jakaś pomoc?
Aamir Nakhwa

13

<defs>Sekcja jak

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

Pracuje.


13
W obecnych przeglądarkach internetowych (luty 2016 r.) Działa to tylko podczas ładowania samodzielnego pliku SVG. Zobacz marians.github.io/test-webfonts-in-svg/test.svg dla przykładu. Otwierając ten sam plik SVG na stronie HTML, czcionka nie jest ładowana / renderowana. Jako przykładu użyj marians.github.io/test-webfonts-in-svg .
Marian

1
Zarówno autonomiczna strona SVG, jak i HTML wydają się działać tak samo w wersji Chrome 73.0.3683.103 (oficjalna wersja) (64-bitowa).
Paul Grime,

Ładuje czcionki, gdy otwieram svg w przeglądarce, ale kiedy otwieram ten sam plik svg w programie Adobe Illustrator, nie ładuje czcionek. Jakaś pomoc?
Aamir Nakhwa

3

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:

wprowadź opis zdjęcia tutaj

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


OK, świetnie wygląda dobrze. Niestety, przesyłanie na stronę Wordpress, która z przyjemnością zaakceptowała SVG, nie spowoduje „Przepraszamy, ten typ pliku jest niedozwolony ze względów bezpieczeństwa”. - co muszę odłożyć, aby to zadziałało?
Chris Pink

1

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.


0

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>

Po co uwzględniać tak wiele czcionek Google? To nie wszystkie z nich lub najczęściej używane, które często widuję i zwiększą całkowitą wagę SVG.
MrMesees,

Ładuje czcionki, gdy otwieram svg w przeglądarce, ale kiedy otwieram ten sam plik svg w programie Adobe Illustrator, nie ładuje czcionek. Jakaś pomoc?
Aamir Nakhwa

0

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


Niestety „konwersja do konturów” nie jest świetną opcją dla mniejszych rozmiarów tekstu.
Chris Pink

@ChrisPink, tak, masz rację!, Udostępnij, jeśli znalazłeś inną opcję dla małego rozmiaru czcionki
Super Model,

1
@ SuperModel Z wielkim sukcesem korzystałem z Nano, a czcionki pobierały style z załączonego dokumentu. Moje pierwsze próby nie powiodły się, ale dzięki życzliwemu wsparciu zespołu Nano wypracowaliśmy, że chodzi o to, aby upewnić się, że nagłówek SVG pozostaje nienaruszony.
Chris Pink
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.