Zachowanie typu czcionki w pliku SVG programu Illustrator

Cześć. Jestem nowy w programie Illustrator i utworzyłem obraz, który używa czcionki „Skia-Regular”. Ale kiedy zapisuję ten obraz w formacie .svg , zmienia on rodzaj czcionki. A kiedy otwieram plik w formacie .svg w przeglądarce, czcionka jest zupełnie inna. Czy ktoś może mi powiedzieć, co robię źle. Otworzyłem również plik .svg w Notatniku ++ i mówi on także font-family = "'Skia-Regular', ale nadal nie jest to czcionka Skia Regular. Każda pomoc będzie mile widziana. Dzięki

Obraz jest również dołączony w celach informacyjnych

Jeśli chcesz mieć pewność, że tekst będzie za każdym razem wyglądał tak samo -

Najpierw możesz rozwinąć tekst przed zapisaniem go jako svg

Po drugie, w części czcionek okna dialogowego zapisywania możesz nacisnąć „przekonwertuj na kontur”

Powodem, dla którego czcionka nie jest poprawnie renderowana do rzeczywistego typu czcionki, jest to, że po zapisaniu SVG za pomocą aplikacji Illustrator. Aplikacja automatycznie konwertuje projekt na kod. A jeśli jest to ściśle obserwowane, nazwa czcionki w kodzie nie pasuje do faktycznej czcionki zainstalowanej w systemie.

Aby rozwiązać problem renderowania czcionek, musisz skopiować kod SVG z programu Illustrator i zmodyfikować nazwę czcionki, aby pasowała do nazwy czcionki zainstalowanej w systemie. (Np .: nazwa czcionki w kodzie SVG, który z programu Illustrator „Arial-Regular”, ale nazwa czcionki zainstalowanej w systemie to „Arial Regular”. W tym przypadku należy zmodyfikować kod, aby mieć rodzinę czcionek jako „Arial Regular” „.)

To rozwiąże twój problem bez konieczności konwertowania czcionek na kontury.

Mam nadzieję że to pomoże!

Jak zauważyłeś, krój pisma to odniesienie do pliku czcionek, który może (ale nie musi) być dostępny dla systemu, który próbuje otworzyć svg. Rozwiązaniem jest konwersja typu na ścieżki, dzięki czemu krzywe są zapisywane jawnie w pliku.

To, dlaczego przeglądarka może nie znać twarzy czcionki, do której próbujesz się odwołać, nie jest jasne, ponieważ zakładam, że testujesz na tym samym komputerze, którego użyłeś podczas tworzenia pliku svg. Możliwe, że czcionkę można wybrać w programie Illustrator, ale nie jest ona formalnie zainstalowana na poziomie systemu operacyjnego.

archiwum dla sieci:

1. używaj czcionek Google.
2. przy użyciu tylko dwóch rodzin czcionek max.

Eksportuj: czcionki: (tekst: svg, subconjunto: brak). właściwości svg: (element stylu).

w stylach pliku wynikowego edytuj go:

1. dołącz wiersz „@import”.
2. dołącz „px” do wszystkich rozmiarów czcionek.
3. zmień nazwę czcionki.

wynik:

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

Możliwe, że na twoim komputerze nie ma pliku czcionek z rodziny czcionek (Skia-Regular) dostępnych lokalnie. Kiedy więc otworzysz plik SVG w przeglądarce, renderuje się go przy użyciu domyślnej czcionki systemowej, którą najczęściej jest Times New Roman. Istnieje kilka obejść:

1. Użyj @import, aby odnieść się do API czcionek Google (ale haczyk polega na tym, że w zależności od tego, jak osadzasz obrazy SVG na swojej stronie, działa to dobrze tylko wtedy, gdy używasz wbudowanego SVG i tagu obiektowego SVG)
2. Konwertuj czcionki na ścieżkę (co zwiększa rozmiar pliku i powoduje rozmycie tekstu po utracie renderowania ClearType )
3. Osadź czcionki w pliku SVG za pomocą Nano

Więcej informacji na temat używania niestandardowych czcionek w SVG można znaleźć tutaj: https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/