2012-04-20 7 views
11

Ich möchte eine Symbolschrift für die Verwendung in einer Webanwendung erstellen. fontAwesome, Iconic, fontomas sind Beispiele für das, was ich gerne tun würde, aber ich muss benutzerdefinierte Symbole verwenden. Ich bin mir nicht sicher, wo ich anfangen soll. Jede Hilfe wird geschätzt.Werkzeuge zum Erstellen einer Symbolschrift

Antwort

10

Inkscape ist eine großartige kostenlose Anwendung zum Erstellen von Grafiken mit Vektoren (aus denen moderne Schriftarten bestehen).

FontForge ist eine große kostenlose Anwendung zum Erstellen von Schriftarten und kann SVG (ein großes kostenloses Vektorgrafiken Format) von Inkscape importieren.

+0

Fontforge sehr gut funktioniert. Es war in der Lage, es ziemlich einfach zu installieren, indem man brüht. Vielen Dank. – Rob

+0

Homebrew betrügt, dies wird auf Ihrer dauerhaften Aufzeichnung gehen! : p – reisio

1

Rob, können Sie start here.

Es ist nicht das beste Beispiel und die Vorlage, von der es spricht, ist ein wenig veraltet. Sie müssen experimentieren, indem Sie Ihre Symbole abhängig von Ihren Schriftart-Baselines durch die Zeichenfläche bewegen.

Es gibt auch diese long post wo er seine Vektoren in FontLab importiert. Nachteile von FontLab sind $ 649 und die Lernkurve ist steiler als Inkscape. Ich habe auch festgestellt, dass FontLab auf meiner OS X-Installation fehlerhaft ist.

Auf einer seitlichen Anmerkung:

Jemand muss Software für diese Aufgabe machen ...

2

Trotz allem, was narkeeso sagte, eine Schrift hat nur eine Basislinie. Alle Ihre Symbole sollten in dieser Zeile stehen, um konsistent zu sein. Einige Symbolschriftarten versuchen, die Symbole vertikal zu zentrieren, dies verursacht jedoch mehr Probleme als gelöst und Sie können die vertikale Position des Symbols relativ zu den umgebenden Zeichen mithilfe der Eigenschaft vertical-align anpassen.

Ich habe die Baseline in der Vorlage für diesen Artikel schwer getestet und es ist sehr erfolgreich in Browsern. Vielleicht möchten Sie die X-Höhe jedoch an eine gewöhnliche Schriftart wie Arial anpassen. Dies kann im Font Squirrel Converter erfolgen.

17

Wenn Sie es nicht schon gesehen haben, könnte meine Web-App hilft Ihnen Symbol Fonts erzeugen: http://icomoon.io/app

Sie Ihre eigene SVGs importieren können, oder das Symbol Schriftbibliothek durchsuchen: http://icomoon.io/app/#library

+1

Diese App ist wirklich nützlich und gut ausgeführt. Einfach zu importieren SVGs und exportieren Sie eine Schriftart, komplett mit dem CSS automatisch generiert. – taudep

+0

Diese App ist großartig! – Bema

+0

Warum kann ich keine 128x128 svg/png über die App generieren? –

1

ive mit eine App namens glyphs (http://www.glyphsapp.com/), um Schriften zu erstellen, und kürzlich eine Icon-Schriftart für die Verwendung im Internet verwendet wurde. Ich importierte Glyphicons, wie sie mit Bootstrap kommen, um zu sehen, welche Metriken sie verwendet haben. also bei 20px Schriftgröße passen sie am besten zum Raster. usw.

Ich habe ein benutzerdefiniertes Skript, um eine CSS-Datei zu exportieren, die alle Klassen mit den angehängten Unicodes erstellt. und ein anderes Python-Skript, das Unicode-Werte in benutzerdefinierte Glyphen umwandelt (einige Icons sind tatsächlich Teil von Unicode, wie Kamera, Glocke und solche Dinge)

danach muss ich font squirrel für Web-Font-Konvertierung verwenden tho, i Ich habe mich mit dem Entwickler in Verbindung gesetzt, der gesagt hat, dass er den Webfont-Export implementiert hat. Updates sind kostenlos, aber er hat den direkten Webfont-Export noch nicht eingeschlossen. so ist es immer ein bisschen mühsam, die Schriftart aus der App in den Browser zu bekommen.

aber ich habe sicherlich ein paar Faktoren gestrafft.

fontlab ist nicht so benutzerfreundlich und ich kann es vor allem aus diesem Grund, aber auch Preis empfehlen.Glyphs bietet eine Mini-Version für 40 €, die die Funktionalität für die Icon-Generierung abdecken soll.

Verwandte Themen