Erstellen von Symbolschriften mit Vektorsoftware (z. B. inkscape) und fontforge?

Bekommen Sie hier einige Antworten und einige der Forschung, ich habe über einen neuen Ansatz für die Implementierung von icons. Anstatt wie Bilder oder css-hintergrund, es scheint, Sie können Ansatz-icons als schriftart.

Wird diese Methode letztlich bedeuten Sie das erstellen eines Datei-schriftart festgelegt hat, dass jedes Symbol zugeordnet, um einen Charakter? Denn diese Methode ist so neu für mich, ich will wirklich sicher, ob ich den Ansatz richtig ersten (sehe ich großes potential... so viel besser als die Erstellung verschiedener Symbole, die Ausfuhr jeweils als eigene .png-Datei für jede unterschiedliche Farbe und Größe).

Wenn das der Fall ist, ist es ein bisschen Auswendiglernen (besonders, da ich über 26 Symbole). Für diejenigen, die mehr Erfahrung mit fontforge, gibt es eine Möglichkeit zu sagen ein bestimmtes Wort = Zeichen?

Auch in Bezug auf die Umsetzung dieses auf der website. Ich würde dann müssen Sie die schriftart in die css-Klasse/- id (z.B. font=icons; ). Und dann könnte ich die Größe ändern, Farbe, etc. mit css so gut? Mann, wenn das wirklich wahr ist. Ich wünschte, ich früher... und Stunden konnten gerettet werden.

Trotzdem, jede Hilfe für diese wird sehr geschätzt. Ich bin über fontforge und lernen beginnen (wenn es bessere Kostenlose software für font erstellen, lassen mich wissen). Hoffentlich klappt das.

InformationsquelleAutor der Frage jstacks | 2012-09-09

  1. 50

    Habe ich erfolgreich erstellt, ein paar von Symbol-Schriftarten für meine websites und die Inkscape-FontForge Ansatz in dieses how-to ist ziemlich solide, und wenn Sie verwendet, um mit software wie Inkscape, es ist auch ziemlich einfach. Hier die Schritte ich nehmen:

    Vorbereitung (mit Inkscape in diesem Beispiel)

    1. Öffnen Sie das Inkscape-Dokument, das hält Ihre Entwürfe.
    2. Stellen Sie sicher, dass Sie konvertiert haben, in allen Formen, Typ und Linien, Pfade und überprüfen Sie Ihre Zeichnung im Umriss-Modus, um sicher zu sein. Wenn es sind Probleme, Sie immer wieder zu dieser Basis-Datei, um die ersten Veränderungen auf die Formen.
    3. Erstellen Sie ein neues Dokument, indem Sie Neue > fontforge_glyph.
    4. Fügen Sie ein Symbol aus Ihren Entwurf in das neue Dokument.
    5. Größe das Symbol zu passen den Raum (obwohl es kann am besten sein, Sie Sie die Größe aller Symbole in der ursprünglichen design-Dokument der ersten bis zu Ihnen).
    6. Zentrum das Symbol auf der Seite mit dem Ausrichten-Werkzeug (bei Bedarf).
    7. Speichern Sie die Zeichnung als eine plain SVG (es ist einfacher, wenn Sie Titel nach dem Buchstaben zugeordnet werden zB. "j.svg").
    8. Wiederholen Sie die Schritte für andere Symbole.

    Ich werde oft verlassen diese einfache SVG-Dokument öffnen, einfügen in neue icons und Zentrierung und Dimensionierung nach den letzten. Auf diese Weise besteht die Größe und position der Konsistenz über die Symbol setzen (und Sie haben nicht zu halten wählen Sie das Verzeichnis zum speichern Ihrer einfachen SVGs).

    Glyphe der Schöpfung (mit FontForge)

    1. Einmal, Sie habe eine SVG-Datei für jedes Symbol, FontForge öffnen und erstellen Sie eine neue FontForge Dokument.
    2. In der Haupt-Glyphe display-Fenster, doppelklicken Sie auf einen der Buchstaben/zahlen, die Sie haben, ein Symbol für.
    3. In dieser neuen Glyphen-Fenster, wählen Sie " Datei > Import und wählen Sie eine Ihrer SVG-Dateien (Sie werden wahrscheinlich brauchen, um die Datei ändern-filter in der Datei-Dialog zum anzeigen von SVG-Dateien).
    4. Wenn die import-Register-Fehler und das wireframe sieht aus wie seine erlitt eine milde explosion, die Sie brauchen, um zurück zu Inkscape zu Sortieren, den Weg. Es gibt einen einfachen Weg, um herauszufinden, das problem, das sollte in den meisten Fällen:
      • In Inkscape, entfernen Sie die Füllung das Symbol.
      • Fügen Sie eine dünne Kontur (1px).
      • Konvertieren Sie die Kontur in einen Pfad.
      • Die resultierende Form wird vermutlich fehlt ein Teil von Ihr Symbol.
      • Rückgängig machen, dann Pause-Symbol auseinander und neu zeichnen/trace/korrigieren Sie das problem.

    Font-Erstellung (mit FontForge)

    1. Zurück in FontForge, sobald Sie Hinzugefügt haben alle Symbole, die Sie brauchen zu geben, Ihre Schrift ein name. Im Hauptfenster, wählen Sie Element > Font info.

    2. Ändern Sie die folgenden:

      • Fontname: MyFontMedium
      • Familie name: Meine Schrift
      • Bezeichnung für Menschen: Meine Schrift Medium
      • Gewicht: Buch (Win XP denkt, medium = bold, also am besten zu handhabende Buch)

    3. In das Hauptfenster, wählen Sie " Datei > Erstellung von Schriften und speichern Sie Sie auf TrueType (ohne jeglichen Fehler).

    Font-Validierung/Konvertierung

    1. Gehen http://www.fontsquirrel.com/fontface/generator oder einen ähnlichen Dienst, zum hochladen Ihrer TTF-Datei und bekommen es umgesetzt (und korrigiert)
    2. Die zip-Datei, die Sie herunterladen, enthält genaue Anweisungen zur Implementierung die fonts in Ihrem web-Projekt.

    Hoffe, dass die helfen.

    InformationsquelleAutor der Antwort wayfarer_boy

  2. 7

    Hier ist ein open-source-Beispiel für das, was Sie suchen, zu tun:

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

    Wenn Sie schauen auf Ihren code, können Sie sehen, wie Sie das CSS:

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

    Und wenn Sie möchten, Bearbeiten Sie die Schriftarten, download FontAwesome.ttf und Bearbeiten in FontForge. Wenn Sie möchten, um Ihre eigene TTF, Sie könnte, aber nehmen Sie nur einen Blick und kopieren, wie Sie es getan haben, denke ich.

    (Disclaimer: ich nicht getan habe, diesen Teil des Prozesses. In unserem team einer der Jungs verwendet eine proprietäre App für den Mac kommen mit der schriftart. Wenn ich tun müssen, meine eigene icon-fonts in Zukunft werde ich wohl Inkscape und FontForge obwohl. Ich habe genug zu sehen, dass FontForge importieren können, SVG, ich habe es nicht versucht, obwohl).

    Wenn Sie fertig sind, und Sie haben Ihre TTF-font, wie Sie es wollen, müssen Sie konvertieren Sie die schriftart in der viele verschiedene Formate zu verwenden benötigt als web-schriftart. Ich benutze dieses Kostenlose online-tool:

    http://fontface.codeandmore.com/

    ... die Ihnen Ihr EOT -, SVG -, TTF-und WOFF-font-Dateien, die sollte für Sie für fast alle Browser. Sie müssen dann diese Dateien enthalten in der CSS, wie gezeigt, in der Datei oben verlinkten. Hinweis: für die SVG-Datei, dort ist eine ID, die Sie haben, zu aktualisieren. Ich denke, es wird automatisch gewählt, indem Sie den Konvertierungs-Werkzeug, so müssen Sie zum Bearbeiten der SVG, zu überprüfen, was die ID ist, und schließen Sie ihn.

    Zum Beispiel in diesem code:

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

    Müssen Sie möglicherweise ändern Sie die #myiconfont-regular bisschen nach dem svg-definition.

    InformationsquelleAutor der Antwort Jason O'Neil

Schreibe einen Kommentar