Tworzenie czcionek ikon za pomocą oprogramowania wektorowego (np. inkscape) i fontforge?

Poprzez uzyskanie kilku odpowiedzi tutaj i trochę badań, natknąłem się na nowe podejście do wdrażania ikon. Zamiast jako obrazy lub tło css, wydaje się, że można podejść ikony jako czcionkę.

Czy ta metoda ostatecznie oznacza utworzenie zestawu czcionek jednego pliku, który ma każdą ikonę przypisaną do znaku? Ponieważ ta metoda jest dla mnie tak Nowa, naprawdę chcę mieć pewność, że najpierw podchodzę do niej poprawnie (widzę wielki potencjał... o wiele lepsze niż tworzenie różnych ikon, eksportowanie każdej jako jest własny .plik png dla każdego innego koloru i rozmiaru).

Jeśli tak, to trochę zapamiętywania (zwłaszcza, że mam ponad 26 ikon). Dla tych bardziej doświadczonych z fontforge, jest sposób, aby powiedzieć konkretne słowo = znak?

Również w odniesieniu do wdrożenia tego na stronie internetowej. Następnie musiałbym określić typ czcionki w css class / id (tj. font=icons;). A potem mogłem zmienić rozmiar, kolor itp. z css też? Człowieku, jeśli to naprawdę jest prawda. Chciałbym się dowiedzieć wcześniej... godziny i godziny można było zaoszczędzić.

W każdym razie, każda pomoc z tym jest bardzo mile widziana. Mam zamiar zdobyć fontforge i zacząć się uczyć(jeśli jest lepsze darmowe oprogramowanie do tworzenia czcionek, daj mi znać). Mam nadzieję, że to się uda.

Author: jstacks, 2012-09-09
Source

2 answers

Udało mi się stworzyć kilka czcionek ikon dla moich stron internetowych, a podejście Inkscape FontForge opisane w to how-to {2]} jest całkiem solidne, a jeśli jesteś przyzwyczajony do korzystania z oprogramowania takiego jak Inkscape, jest to również dość łatwe. Oto kroki i podjąć:

Przygotowanie (używając Inkscape w tym przykładzie)

  1. Otwórz dokument Inkscape, który zawiera Twoje projekty.
  2. upewnij się, że wszystkie kształty, typy i linie zostały przekonwertowane na ścieżki i sprawdź rysunek tryb obrysu dla pewności. Jeśli istnieją problemy, zawsze możesz odwołać się do tego pliku bazowego, aby dokonać początkowych zmian kształtów.
  3. Utwórz nowy dokument wybierając New > fontforge_glyph.
  4. Wklej ikonę z projektu do nowego dokumentu.
  5. Zmień rozmiar ikony tak, aby pasowała do dostępnego miejsca(chociaż najlepiej będzie najpierw zmienić rozmiar wszystkich ikon w oryginalnym dokumencie projektowym-do ciebie).
  6. Wyśrodkuj ikonę na stronie za pomocą narzędzia Wyrównanie (w stosownych przypadkach).
  7. Zapisz rysunek jako zwykły SVG (łatwiej jest, jeśli tytuł jest zgodny z przypisaną literą np. "j.svg").
  8. powtórz dla innych ikon.

często zostawiam ten zwykły dokument SVG otwarty, wklejając nowe ikony i centrując i sortując zgodnie z ostatnim. W ten sposób istnieje spójność rozmiaru i pozycji w całym zestawie ikon (i nie musisz ciągle wybierać katalogu, aby zapisać swój zwykły SVGs).

Tworzenie glifów (za pomocą FontForge)

  1. Po utworzeniu pliku SVG dla każdej ikony, otwórz FontForge i utwórz nowy dokument FontForge.
  2. w głównym oknie listy glifów kliknij dwukrotnie jedną z liter/cyfr, dla których masz ikonę.
  3. w tym nowym oknie glifu wybierz Plik > Importuj i wybierz jeden z plików SVG (prawdopodobnie będziesz musiał zmienić filtr plików w oknie dialogowym pliku, aby wyświetlić pliki SVG).
  4. Jeśli import rejestruje błędy, a szkielet szkieletu wygląda na łagodny wybuch, musisz wrócić do Inkscape, aby uporządkować ścieżkę. Jest łatwy sposób, aby znaleźć problem, który powinien działać w większości przypadków:
    • w Inkscape Usuń wypełnienie ikony.
    • dodaj cienką kreskę (wystarczy 1px).
    • Konwersja obrysu na ścieżkę.
    • wynikowy kształt prawdopodobnie będzie brakowało części ikony.
    • Cofnij wszystko, następnie rozłóż ikonę i przerysuj/śledź / popraw obszar problemu.

Tworzenie czcionek (za pomocą FontForge)

  1. z powrotem w FontForge, po dodaniu wszystkich ikon, musisz nadać krojowi czcionki nazwę. W głównym oknie wybierz Element > informacja o czcionce.

  2. Zmień:

    • Fontname: MyFontMedium
    • Nazwa Rodziny: Moja czcionka
    • nazwa dla ludzi : Moja czcionka Medium
    • Waga : Książka (Win XP myśli średnio = pogrubienie, więc najlepiej używać książki)

  3. W głównym oknie wybierz File > Generate Fonts i zapisz do TrueType (ignorując błędy).

Walidacja/konwersja czcionki

  1. idź do www.fontsquirrel.com/fontface/generator [2]} lub podobną usługę, aby przesłać plik TTF i uzyskać go przekonwertowany (i poprawiony)
  2. pobrany plik zip będzie zawierał dokładne instrukcje, jak zaimplementować czcionki do projektu www.

Mam nadzieję, że to pomoże.

 52
Author: wayfarer_boy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-29 21:45:42

Oto przykład open source tego, co chcesz zrobić:

Http://fortawesome.github.com/Font-Awesome/

Jeśli spojrzysz na ich kod, zobaczysz jak uruchomić CSS:

Https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css

A jeśli chcesz edytować czcionki, Pobierz FontAwesome.ttf i edytować w FontForge. Jeśli chcesz zrobić własny TTF, możesz, ale po prostu spójrz i skopiuj jak to zrobili Zgadnij.

(Zastrzeżenie: nie zrobiłem tej części procesu. W naszym zespole jeden z chłopaków używa zastrzeżonej aplikacji Mac, aby wymyślić czcionkę. Jeśli będę musiał zrobić własne czcionki icon w przyszłości prawdopodobnie użyję Inkscape i FontForge. Sprawdziłem wystarczająco, aby zobaczyć, że FontForge może importować SVG, nie próbowałem jednak ).

Kiedy skończysz i masz czcionkę TTF tak, jak chcesz, musisz przekonwertować czcionkę na wiele różnych formatów potrzebnych do użycia jako czcionką internetową. Używam tego darmowego narzędzia online:

Http://fontface.codeandmore.com/

... co daje Ci pliki czcionek EOT, SVG, TTF i WOFF, które powinny obejmować prawie wszystkie przeglądarki. Następnie musisz dołączyć te pliki do CSS, jak pokazano w pliku połączonym powyżej. Uwaga: W przypadku pliku SVG istnieje identyfikator, który należy zaktualizować. Myślę, że jest automatycznie wybierany przez narzędzie do konwersji, więc będziesz musiał edytować SVG, sprawdzić, jaki jest identyfikator i załącz to.

Na przykład w tym kodzie: 

@font-face {
  font-family: 'MyIcons';
  src: url('myiconfont-iconglyphs.eot');
  src: url('myiconfont-iconglyphs.eot#iefix') format('embedded-opentype'),
       url('myiconfont-iconglyphs.woff') format('woff'),
       url('myiconfont-iconglyphs.ttf')  format('truetype'),
       url('myiconfont-iconglyphs.svg#myiconfont-regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Być może trzeba będzie zmienić bit #myiconfont-regular po definicji svg.

 7
Author: Jason O'Neil,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-11 02:48:13