Konvertieren Sie benutzerdefinierte Symbolschriftarten in Objekte, die kopiert und eingefügt werden können

Font Awesome hat ein Cheatsheet, in dem sie ihre Symbole in HTML-Entitäten konvertiert haben, die Sie direkt in Sketch (und andere Bearbeitungsprogramme) kopieren und einfügen können, wodurch das Typelement in das gewünschte Symbol geändert wird (solange Sie die Schriftart installiert haben). ). Demo: http://recordit.co/Irr9HBpVPX

Ich frage mich, wie ich das mit der eigenen benutzerdefinierten Schriftart meines Unternehmens machen soll. Wir haben einen internen Living Style Guide, der alle unsere benutzerdefinierten Symbole als CSS-Inhaltscode (als Pseudo-Element-Hintergrundbilder), aber nicht als Typ enthält. Ich frage mich, wie ich sie in typfähige Inhalte umwandeln kann, die ich einfach kopieren und mit unserer benutzerdefinierten Schriftart in Sketch einfügen könnte.

Jede Hilfe geschätzt – danke

Antworten (1)

Existieren Ihre CSS-Hintergrundbilder als Vektorzeichnungen oder nur als Pixelbilder?

Eine einfache Möglichkeit zum Erstellen von Symbolschriften ist Icomoon , aber Sie benötigen SVG-Dateien Ihrer Symbole. Icomoon generiert eine Icon-Schriftart und eine demo.htmlFontAwesome-ähnliche Datei.

Im Grunde sind Icon-Fonts genau wie normale Fonts, außer dass ihre „Buchstaben“ Unicode-IDs zugeordnet sind, auf die eine normale Tastatur nicht zugreifen kann. Sie können jedoch wie jeder andere Brief kopiert/eingefügt werden.

Ah, sie sind also Unicode. OK, also ist der wahrscheinlich beste Weg, dies zu tun, über icomoon zu konvertieren und dann die mitgelieferten Unicode-Buchstaben zu erhalten oder CSS-Inhaltscode irgendwie in Unicode zu konvertieren (nicht sicher, ob das überhaupt möglich ist ...). Danke!
Wenn Sie eine vorhandene Schriftdatei haben, können Sie sie in Icomoon importieren und dann sofort exportieren, wodurch Ihr Cheatsheet generiert wird. Sie brauchen die neue Schriftart nicht, nur die demo.html, die Ihre Schriftartenzuordnungsliste zeigt.