Der folgende Beitrag ist ein Gastbeitrag von Vitaly Puzrin, dem Entwickler des Icon-Font-Services Fontello. Ich bin auch ein Fan von IcoMoon, einem ähnlichen Service. Aber ich bin auch ein großer Fan von Wettbewerb, dem Teilen von Gedanken und Open-Source-Software, also danke Vitaly!
Meine Vergangenheit
Ich habe mich früher sehr für ferngesteuerte Modelle interessiert. Ich betreibe sogar die größte russischsprachige Community für ferngesteuerte Modelle. Diese Website unterstützt mich bis heute und gibt mir die Freiheit, an anderen Projekten zu arbeiten. Heute entwickle ich mit einem kleinen Team Software, einfach weil ich gerne programmiere!
Meine Programmiertage begannen, als ich beschloss, die Software für RC Design komplett neu zu schreiben. Viele Jahre lang entwickelten ich (und später ich und mein Team) Komponenten für IPB- und vBulletin-Foren. Schließlich beschlossen wir, dass wir zu viel Zeit damit verbrachten, Drittanbieter-Software nach unseren Bedürfnissen anzupassen. Die beliebtesten Foren sind kommerziell und auf *besten Verkauf* optimiert, nicht auf *beste Qualität*.
Daher ist in unserem Fall die Investition von ein paar Jahren Entwicklungszeit langfristig für unser mittelgroßes Projekt gerechtfertigt1.
Die erste Fontello-Veröffentlichung
Bei der Untersuchung neuer Technologien war ich begeistert von der Idee, Webfonts zur Darstellung von Grafiken zu verwenden. Das ist aus Entwicklungssicht sehr praktisch.
Anfangs war es seltsam. Warum gab es so wenige Icon-Fonts? Warum benutzten nicht alle sie? Meiner Meinung nach liegt das an einem Prozessbruch. Der Prozess von der Idee bis zur Nutzung ist ziemlich lang und komplex
- Designer entwirft die Icons
- Die Icons werden im Vektorformat erstellt
- Mehrere Icons werden zu Fonts verarbeitet
- Diese Fonts werden in die für das Web benötigten Formate konvertiert
- Spezielles HTML und CSS werden benötigt, um ein System zur Anzeige der Icon-Font-Glyphen zu haben
- Optimierungen sind erforderlich, um die Dinge effizient zu gestalten
- Frontend-Entwickler müssen es tatsächlich umsetzen
Der Prozess kann in jedem dieser Schritte fehlschlagen. Dies wird besonders wahrscheinlich, da er verschiedene Personen involviert: Designer und Entwickler. Es kann eine Lücke zwischen diesen Personen geben.
Die erste Fontello-Veröffentlichung diente dazu, diese Lücke zu schließen, indem es für alle einfacher wurde. Sie enthielt mehrere bereits fertige Icon-Fonts. Die erste Veröffentlichung finden Sie noch im GitHub-Archiv.
Warum Icon-Fonts verwenden?
Damit wir alle auf dem gleichen Stand sind, fasse ich die Vor- und Nachteile der Verwendung von Webfonts zur Anzeige von Icons zusammen.
Vorteile
- Fonts sind Vektoren, daher gibt es keine Pixelbildung oder Unschärfe auf hochauflösenden Bildschirmen, wie es bei Rastergrafiken der Fall wäre, die skaliert werden müssen.
- Die Browserunterstützung ist so gut, wie Sie sie benötigen.
- Sobald das System eingerichtet ist, ist die Verwendung sehr bequem.
- Wohl einfacher als das Spriten von Bildern.
- Sie können mit CSS gesteuert werden, wie Größe, Farbe, Schatten usw.
Nachteile
- Die Icons sind einfarbig. Es gibt einige ausgefallene (hacky) Techniken für mehrfarbige Icons, aber moderne Trends und HIGs (Human Interface Guidelines) empfehlen sowieso einfarbige.
Wenn Sie weitere Informationen zu Icon-Fonts und deren Verwendung benötigen, hier sind einige empfohlene Links
Nächste Schritte
Nach unserer ersten Veröffentlichung erhielt Fontello (damals "Fontomas" genannt) sehr gute Kritiken. Mit der Bestätigung, dass das Projekt nützlich war, hatten wir neuen Enthusiasmus, es noch besser zu machen. Ich beschloss auch, Fontello als Sandbox zum Testen neuer Technologien zu verwenden, mit denen ich experimentieren wollte, wie WebSockets, neue Bibliotheken und so weiter.
Ungefähr zur gleichen Zeit erschienen neue professionelle (und Open Source) Icon-Fonts: Entypo & FontAwesome. Wir haben sie sofort in Fontello aufgenommen.
Font-Format-Probleme
Für die beste browserübergreifende Unterstützung werden *vier* Font-Formate für das Web benötigt: woff, ttf, svg & eot. Aber wenn Sie nach Bibliotheken für die Font-Generierung suchen, werden Sie nicht viel Hilfe finden. Insbesondere für ttf.
Soweit ich weiß, schließen alle den Prozess serverseitig mit FontForge ab. Die Formate eot und woff sind nur Container für ttf. Es gibt einige Open-Source-Konvertierungsprojekte, wie zum Beispiel für ttf zu eot, und http://code.google.com/p/ttf2eot/ und ttf zu woff. Diese funktionieren und wir verwenden sie.
Hinweisgebung
Hinting ist eine Technologie, um Buchstaben auch in kleinen Größen besser lesbar zu machen. Da das Thema recht komplex ist, empfehle ich Ihnen, die wunderbare Einführung auf der Website des ttfautohint-Tools zu lesen.
Fontello kann mit ttfautohint Hinting hinzufügen. Früher funktionierte ttfautohint nur mit Text-Fonts, da es den Buchstaben O verwendete, um die Basis-Font-Metriken zu ermitteln. Aber ich habe die Unterstützung für Icon-Fonts gesponsert, so dass es nun auch diese hintet.
Ist Hinting gut für Icon-Fonts? Ehrlich gesagt, das hängt davon ab... Ich empfehle Ihnen, mit Ihrem Projekt zu experimentieren und die Ergebnisse zu vergleichen. Kann Ihr Font ohne Hinting scharf sein? Ja, wenn er pixelgenau ist: nur in einer Größe angezeigt, speziell für diese Größe gezeichnet. Zum Beispiel ist der Entypo-Font bei 20px scharf, und FontAwesome ist bei 14px scharf. Um dies zu sehen, gehen Sie auf die Fontello-Website und ziehen Sie den Größenregler hin und her und sehen Sie, wie sich das Aussehen der Icons verändert.
Oberflächendetails
Ich beschloss, einige Zeit damit zu verbringen, die Benutzeroberfläche von Fontello zu verbessern.
Wenn Sie ein Icon finden, das Ihnen gefällt, ist es sehr praktisch zu sehen, wie dieses Icon mit Text kombiniert wird. Das machen wir im zweiten Tab von Fontello, der gleichzeitig als Ort zum Ändern von Namen dient.
Der einzig korrekte Weg, dies zu tun, ist die buchstäbliche Anzeige des Icons über @font-face. Jede andere Technik (wie Raphael oder) Cuffon passt niemals richtig zu den Font-Metriken. Es gab also ein ernstes Problem.
- Wir müssen unsere Icon-Sammlungen in Webfonts speichern.
- Das können wir nicht für benutzerdefinierte Icons. Das Neuerstellen eines Fonts für jedes benutzerdefinierte Icon auf der Serverseite ist kompliziert und teuer.
Da das große Ziel darin bestand, die Benutzeroberfläche zu verbessern und es richtig zu machen, beschloss ich, die Importfunktion vorübergehend einzustellen und mich auf die Benutzerfreundlichkeit der Oberfläche zu konzentrieren. Seien wir ehrlich: Ein sehr kleiner Prozentsatz der Leute benötigt wirklich benutzerdefinierte Icons. Vielleicht ist das nicht gut für den "Wow-Faktor", aber Fontello ist kein kommerzielles Projekt, daher kann es einige Geschäftsregeln ignorieren.
Ein weiteres Beispiel für Benutzerfreundlichkeit ist das Design der Fontello-Website. Im Grunde: kein Design :). Nur schlichtes Twitter Bootstrap. Warum? Weil Fontello nur ein Entwicklungswerkzeug ist. Ein Werkzeug wie dieses sollte nicht schön sein, es sollte praktisch sein. Fontello ermöglicht Ihnen:
- Icons suchen
- Schnelle Vorschau des Ergebnisses
- Klassennamen für Ihr spezifisches Projekt ändern
Das ist alles verfügbar und zugänglich.
API für Entwickler
Programmierer hatten einige spezifische Anfragen und Ideen für Fontello.
- Sie bewahren den Code für ihre Projekte in Versionskontrollsystemen auf. Sie möchten ihre Webfonts auch dort speichern.
- Sie mögen es nicht, Dateien mit der Maus zu ziehen.
- Sie möchten eine einfache Möglichkeit, Projekte aus Repositories zu laden, zu aktualisieren und das Ergebnis zurück ins Repository zu verschieben.
Vor einigen Monaten haben wir eine API fertiggestellt, um all dies zu ermöglichen.
Tschüss FontForge
FontForge ist als Editor nett, aber nicht praktisch für die automatisierte Font-Verarbeitung. Es hat seltsame Bugs, die spezifische Workarounds erfordern.
Schließlich beschloss ich, die Ressourcen zu investieren, um Font-Konverter von Grund auf mit Node.js zu schreiben. Das war ein sehr kompliziertes Abenteuer. Jeder, der mit dem ttf-Binärformat arbeiten musste, kann Ihnen sagen, dass es von Aliens für Raubtiere entworfen wurde. Aber dieser Albtraum ist jetzt vorbei, und Sie können das Endergebnis genießen:
Außerdem haben wir eine nützliche Bibliothek für direkte SVG-Pfadtransformationen erstellt (Skalieren, Verschieben, absolute <-> relative Koordinaten und Größenoptimierung).
Natürlich ist Fontello kein völlig einzigartiges Projekt. Die Idee, Fonts zu kombinieren/verkleinern, ist trivial. Aber soweit ich weiß, ist es das einzige in diesem Bereich, das sich so tief in die Entwicklung eingearbeitet hat und alle Errungenschaften unter einer Open-Source-Lizenz teilt.
Hier sind einige interessante Fakten, die nirgendwo sonst dokumentiert sind:
- Wenn ein
ttf-Font kein "PostScript"-Feld in der Namens-Tabelle hat, kann er nicht in der Fontbook von Mac exportiert werden. - Im
eot-Format muss die font-family mit dem vollständigen Namen beginnen, sonst rendert IE ihn nicht.
Dank der Open-Source-Entwicklung hat jemand diese Informationen in unserem GitHub Issue Tracker gepostet.
Zurück mit benutzerdefinierten Icons
Da unsere Font-Konverter in Node.js geschrieben wurden, war es keine große Sache, den Code im Browser zum Laufen zu bringen. Jetzt erstellt Fontello dynamisch ttf-Fonts für importierte Bilder auf der Client-Seite und injiziert sie über Data-URIs in die Seite.
In der Vorschau sehen Sie die Icons genau so, wie sie in den generierten Fonts sein werden. Theoretisch sollten wir das woff-Format verwenden. Aber da alle modernen Browser mit ttf gut zurechtkommen und wir uns nicht sehr um die IE6-Unterstützung kümmern, verwenden wir ttf, um Zeit zu sparen, indem wir nicht zuerst nach woff portieren.
Wie kann ich eine neue Funktion anfordern?
Sie können alles anfordern, was Sie möchten, auf GitHub. Sogar verrückte Sachen! Stellen Sie sich einfach zwei Fragen: 1) Wird es für Sie wirklich nützlich sein? 2) Wird es für andere Leute nützlich sein?
Hier ist ein Beispiel. Manchmal fragen Leute, warum Fontello keine Benutzerkonten anbietet, um Projekte auf unserem Server zu speichern. Hier sind unsere Gedanken:
- Die Speicherung von Benutzerdaten ist eine große Verantwortung. Um die Qualität des Dienstes hoch zu halten, erfordert dies Investitionen und das bedeutet, Fontello wie ein Unternehmen zu führen. Da Fontello als nicht-kommerzielles Projekt positioniert ist, möchten wir es nicht dazu drängen, ein Unternehmen zu werden.
- Benutzer brauchen keine Konten, sie brauchen gute Import- und Exportfunktionen. Dies kann auf bessere Weise erreicht werden.
- Jedes generierte Font-Paket enthält bereits eine Konfigurationsdatei, die wieder in Fontello geladen werden kann, um die Arbeit fortzusetzen. Ziehen Sie es einfach (oder das ganze Archiv) auf die Fontello-Website. Oder verwenden Sie die API, wie oben beschrieben. Einfach!
- Verwenden Sie GitHub, um Ihre Projekte zu speichern und Änderungen zu kontrollieren. Das ist viel sicherer und schützt Sie vor Fehlern.
Jede neue Funktionsanfrage wird nach Mehrwert beurteilt. Konten können gut für die Schaffung eines Geschäfts sein, aber sie fügen Fontello-Nutzern keinen spürbaren Mehrwert hinzu. Das ist eine mysteriöse Idee, wie E-Mail/Passwort-Felder zweimal auf dem Registrierungsformular einzufügen – jeder tut es, aber niemand kann erklären, warum.
Die Zukunft
Sie können die vollständige Versionshistorie hier einsehen.
Der nächste große Schritt ist die Verbesserung der Suche: Ermöglichen Sie den Nutzern, Such-Tags zu aktualisieren, verwandte Icons anzuzeigen und so weiter. Einige Informationen können aus Benutzeraktionen extrahiert werden, z. B. durch Analyse von geänderten Klassennamen.
Außerdem wäre es gut, Designer und Programmierer besser zu verbinden. Ich habe das Gefühl, dass dieser Bereich noch nicht so gut abgedeckt ist, wie er sein könnte. Die Erstellung eines vollständigen Icon-Fonts ist eine sehr große Aufgabe. Viele Designer haben nur ein paar Icons, die sie teilen möchten, aber... wo? Es wäre interessant, jedem zu erlauben, seine Icons auf Fontello zu veröffentlichen. Dies erfordert eine ernsthafte Überarbeitung der Benutzeroberfläche. Wenn Sie also ein Interface-Guru sind und teilnehmen möchten, nehmen Sie bitte Kontakt auf!
1 Meine Vision, wie große moderne Foren gebaut werden sollten, kann in dieser Demo eingesehen werden. Es ist HTML5, Ajax-powered, nutzt die History-API und viele andere coole Technologien.
Oh wow, das ist super!
Also bekommen wir eine vollständige clientseitige Lösung für die Font-Konvertierung UND eine sehr schicke Benutzeroberfläche dafür?
Das ist ein wirklich tolles Open-Source-Projekt.
Ich finde FontForge etwas mühsam zu handhaben, daher ist dies ein schöner Lichtblick für diejenigen, die die browserbasierten Alternativen wie icoMoon mögen, aber ihre eigenen zusätzlichen Akzente setzen oder die Notwendigkeit für so viele serverseitige Aufgaben reduzieren möchten :)
Wenn Sie eine universelle Browserlösung benötigen, die nicht auf ikonische Fonts beschränkt ist, müssen zusätzliche Arbeiten durchgeführt werden.
svg2ttf – eine "vollständige" Font-Konvertierung erfordert Sorgfalt bei Kerning- und Ligatur-ttf-Tabellen. Wir hatten keine praktischen Bedürfnisse, dies zu implementieren, da wir nur ikonische Fonts erstellen. Aber das ist nicht sehr schwierig, wenn jemand beschließt, es zu verbessern.
ttf2woff – erfordert den Austausch der binären asynchronen Deflate-Bibliothek von Node.js durch eine synchrone, in JS geschriebene (Quellen existieren).
ttf2eot – sollte im Browser funktionieren, aber niemand hat es überprüft :)
IcoMoon ist weit voraus. Ich werde bald darüber schreiben :)
Meinen Sie weit voraus von Ihren Versprechungen, es Open Source zu machen?.. :)
Ich habe nie "versprochen", IcoMoon Open Source zu machen. Ich hatte einige Pläne dazu, aber im Moment ziehe ich es vor, alleine daran zu arbeiten. Aber vielleicht werde ich es in Zukunft Open Source machen.
IcoMoon ist in Bezug auf seine Funktionen und vor allem auf seine Endergebnisse anderen Lösungen weit voraus. Fontello's Font-Icons sehen selbst bei richtiger Größe unscharf aus.
Wenn man etwas nicht kann, trollt man einfach überall mit vagen Versprechungen herum, die man nicht einhalten wird. Es war lustig, wie du Leute auf GitHub bezüglich IcoMoon getäuscht hast, als sie versuchten, dir zu erklären, dass GitHub für Open-Source-Projekte ist.
Tatsächlich machst du nur ein gutes Geschäft, indem du von Open-Source-Arbeiten parasitär lebst. Und erfindest gefälschte Aussagen über Fontello, um dein Projekt besser darzustellen, als es ist.
Komm zurück ins reale Leben. Das ist ein technischer Artikel, kein Marketing-Wettbewerb.
@puzrin Was genau schlägst du vor, dass ich nicht tun kann? Ich habe niemanden getäuscht. Ich habe früher den Issue-Tracker von GitHub genutzt und hatte Pläne, IcoMoon Open Source zu machen, aber ich habe einfach meine Meinung geändert. Zumindest für jetzt.
Ich habe zu Open-Source-Projekten beigetragen und werde dies auch weiterhin tun, wenn ich kann. Während ich an der neuen Version von IcoMoon arbeitete, stieß ich auf einige Bugs in AngularJS und machte Pull-Requests (die akzeptiert wurden). Das ist nur ein Beispiel.
Aus Ihrem Artikel:
Die neue Version von IcoMoon (stummgeschaltet am 17. Oktober veröffentlicht) verwendet meine eigene JavaScript-Bibliothek, die ich selbst geschrieben habe, und sie verwendet FontForge nicht auf der Serverseite. Und übrigens, meine Bibliothek unterstützt Ligaturen. Der gesamte Prozess der Font-Generierung erfolgt auf der Client-Seite. Fontello hingegen sendet Anfragen an den Server, wenn Sie auf die Download-Schaltfläche klicken; und daher funktioniert es nicht, wenn Sie offline sind. Die IcoMoon-App kann vollständig offline arbeiten.
Meine Aussage ist nicht "gefälscht" oder "erfunden". Mit Fontello generierte Fonts sehen unscharf aus. Hier ist ein Beispiel:
Screenshot
demo.html (icomoon)
demo.html (fontello)
Dieses Beispiel zeigt 3 Icons, die aus dem "Iconic"-Set ausgewählt wurden. Dieses Icon-Set wurde auf einem 16x16 Gitter entworfen. Ich habe Fontellos Demo angepasst, um die Icons bei 16px anzuzeigen. Ursprünglich wurden sie bei 14px angezeigt (was sie noch schlechter aussehen ließ). Dieses Beispiel zeigt deutlich, wie Fontello im Vergleich zu IcoMoon versagt.
Ich sollte eine Sache bezüglich meines Beispiels klären. Diese Pixeltreue ist nur auf normalen Bildschirmen wichtig. Auf Displays mit hoher PPI werden Sie die Unvollkommenheiten und unscharfen Kanten nicht sehen können.
@keyamoon, jeder weiß, dass GitHub für Open-Source-Projekte ist. Sie haben lange Zeit menschliche Ressourcen der Community genutzt, um Informationen für IcoMoon im GitHub-Issue-Tracker zu sammeln. Und die Community hat Ihnen mit Ihren unklaren Versprechungen geglaubt, weil sie glaubte, dass Sie wirklich einer der Open-Source-Entwickler sind. Am Ende haben Sie einfach das Repository gelöscht. Niemand kümmert sich um Ihre Pläne und Ihre Meinungsumschwünge. Ich sage nur, was aktuell existiert. Ihre Beiträge sind in Ihrem Profil gut sichtbar – es sind ungefähr null.
In den Fonts, die Sie generieren, stellen Sie keine Informationen zur Verfügung, wie die Autoren der verwendeten Icons gutgeschrieben werden sollen. Das ist ein wesentlicher Punkt in Open Source. Sie nehmen einfach andere Arbeiten und brechen die Feedback-Prinzipien der Open-Source-Entwicklung. Ihre eigenen "kostenlosen" Icons haben eine GPL-Lizenz, die nicht mit vielen Projekttypen wie Themes, MIT-lizenzierten und anderen kompatibel ist.
Außerdem sagen Sie, dass Ihre App Ligaturen und Offline-Generierung hat, und vergessen, dass Fontello eine API hat, korrekte Rendering-Vorschau und eine einfachere und übersichtlichere Benutzeroberfläche. Warum glauben Sie, dass Ihre Funktionen mehr Vorteile haben? Das sind nur "Wow-Faktoren" von Nullwert, die für Marketing und Verkauf helfen. Aber Sie kommen zu den Kommentaren und sagen einfach: "Meine App ist besser". Vielleicht ist sie besser für Sie, weil Sie damit Geld verdienen :) ?
Dann nehmen Sie veraltete Iconic, die in Fontello herunterskaliert werden, um besser mit Text zu harmonieren, vergleichen es bei 16px und propagieren das Ergebnis auf ALLE Fontello-Fonts. Netter Witz. Warum nehmen Sie nicht modernere und beliebtere FontAwesome & Entypo? Warum vergleichen Sie nicht gehintete Fonts, wenn die Größe außerhalb des Gitters liegt? Ich denke, weil Sie einfach Fakten manipulieren, wie üblich, um Ihren kommerziellen Service zu bewerben.
Icomoon und Fontello haben unterschiedliche Funktionsumfänge. Aber das bedeutet nicht, dass IcoMoon "etwas Besonderes" und "weit voraus" ist. Das sollten die Benutzer entscheiden, nicht Sie.
Ich habe nichts dagegen, Geld zu verdienen. Aber wie oben gesagt, Sie nutzen Open-Source-Werke mit fast null Feedback und versuchen, ein wirklich Open-Source-Projekt schlecht zu machen, indem Sie Ihr kommerzielles bewerben. Das sieht sehr seltsam aus. Und ich glaube nicht, dass das ein Fontello-Problem ist :)
@puzrin Mein GitHub-Profil zeigt, dass ich zu mehreren Open-Source-Projekten beigetragen habe. Normalerweise tue ich das, wenn ich auf einen Fehler stoße oder so. Ich bin mir nicht sicher, warum Sie sagen, es sei "fast null".
Die Bibliotheken-Registerkarte der IcoMoon-App zeigt Lizenzinformationen für jedes Set an. Ich habe die Lizenz meines kostenlosen Icon-Packs auf GPL geändert, weil WordPress-Theme-Entwickler mich darum gebeten haben. Es war früher CC BY 3.0. Wenn andere Theme-Entwickler eine andere Lizenz wünschen, kann ich die Lizenz erneut ändern.
Ich wollte hier in den Kommentaren nicht alle Funktionen von IcoMoon auflisten. Ich dachte, es wäre angemessener, wenn ich einen vollständigen Artikel über IcoMoon schreibe. Ich könnte IcoMoon Feature für Feature mit Fontello vergleichen, wenn Sie möchten. Haben Sie überhaupt den Vorschau-Tab von IcoMoon gesehen? Er verwendet auch @font-face, falls Sie es nicht wussten. Ich verwende kein cufon oder raphael. Tatsächlich wird, wenn Sie die Metriken Ihres Fonts (wie die Grundlinie) in IcoMoon ändern, die Vorschau aktualisiert und Sie können Ihre Änderungen live sehen. IcoMoon hat auch eine sehr einfache Benutzeroberfläche. Benutzer sollten entscheiden, was besser ist.
Wie Sie wünschen, vergleichen wir FontAwesome. Ich habe Iconic nur zufällig ausgewählt. Ich wusste nicht, dass es in Fontello "veraltet" ist. Hier ist ein weiteres Beispiel mit Icons aus FontAwesome. Beide Demos zeigen die Icons bei 14px, was die Größe ist, für die FontAwesome entwickelt wurde.
Screenshot
demo.html (IcoMoon)
demo.html (fontello)
Gleiches Ergebnis mit oder ohne Aktivierung von "Hinting" in Fontello. Wie ich bereits sagte, scheint Ihr Font-Hinting keinen Unterschied zu machen, außer die Größe des Fonts zu erhöhen!
Ich bin mir nicht sicher, wie ich auf den Rest Ihrer Kommentare eingehen soll, da ich sie nicht vollständig verstehe. Keine Beleidigung, aber Sie sollten vielleicht in Erwägung ziehen, Ihr Englisch zu verbessern.
@keyamoon, ein paar Ihrer Commits auf GitHub machen Sie nicht zu einem Open-Source-Entwickler. Und das ändert nichts daran, dass Ihre Hauptaktivität im IcoMoon-Repository lag, wo Sie Leute lange Zeit über die wahre Natur der App getäuscht haben.
Die Anzeige von Font-Attributen auf Ihrer Website ersetzt nicht die Lizenzdatei im generierten Archiv und die Erklärung, wie Benutzer die Urheber der Kunstwerke gutschreiben können. Sie verbrauchen Open Source auf eine Weise, nur um Ihre proprietäre App und bezahlte Dienste zu bewerben. Und versuchen, Open-Source-Projekte zu diskreditieren, die Sie daran hindern, Ihr Geschäft profitabler zu machen.
Ich bin mir nicht sicher, ob ich eine "ehrliche Vergleich" von einem Experten wie Ihnen brauche :) . Ich weiß nicht, wie Sie Tests und Screenshots machen, aber beide Ihrer letzten Beispiele sind unter Ubuntu + FF/Chrome absolut scharf. Entschuldigen Sie die Enttäuschung, aber Ihre Sensation über schlechte Fontello-Ergebnisse ist nur Spekulation auf einem benutzerdefinierten Fall. Wahrscheinlich verursacht durch eine andere ttf/woff-Sequenz im Fontface. Dasselbe gilt für Hinting – probieren Sie es zuerst auf einer anderen Plattform aus, bevor Sie erklären, dass "es nicht funktioniert".
Übrigens, Sie weisen immer auf den "Fehler" hin, dass Fontello nicht die einzige App ist, die FontForge nicht verwendet. Fontello ist vor einigen Monaten auf neue Font-Generatoren umgestiegen, Sie sind hier weit davon entfernt, der Erste zu sein. Fonts für scharfe Vorschauen werden seit Jahren verwendet. Und dieser Artikel wurde eine Woche vor Ihrem App-Update geschrieben :) . Das ändert auch nichts an der globalen Situation – Fontello teilt seine Bibliotheken mit der Community, es deckt einen breiteren Bereich ab als Ihr kommerzieller Dienst zur Font-Generierung.
PS. Wenn Sie mit meinem Englisch nicht zurechtkommen – kein Problem, sprechen Sie Russisch.
Sie beleidigen mich, ohne die ganze Geschichte zu kennen. Ich habe niemanden auf GitHub zu täuschen versucht. Ich hatte deutlich angegeben, dass das Repository leer war und ich lediglich den Issue Tracker nutzte. Ich hatte tatsächlich gesehen, wie Chris das mit css-tricks gemacht hat, und dachte daher, es müsse akzeptabel sein, nur den Issue Tracker zu nutzen.
Das Hinzufügen einer Lizenzdatei zu von IcoMoon generierten Paketen steht tatsächlich auf meiner To-Do-Liste. Die alte Version hat das tatsächlich getan.
Falls Sie bereit sind, Ihren Service zu verbessern, anstatt Fakten zu ignorieren, wurde mein Screenshot unter OS X in Chrome aufgenommen. Sie erhalten das gleiche Ergebnis in Safari.
Anstatt mich zu beleidigen, vergleichen Sie die Funktionen und Endergebnisse von Fontello mit denen von IcoMoon.
@keyamoon, Ihre Pläne, Träume und Versprechen können nicht berücksichtigt werden. Meine Haltung hängt von den Dingen ab, die Sie jetzt haben und was Sie in der Vergangenheit getan haben. Wenn Sie es für normale Praxis halten, Open-Source-Projekte aggressiv anzugreifen – wundern Sie sich nicht, wenn sich jemand an all Ihre "Fehler" erinnert, die in der Open-Source-Community gemacht wurden. Ohne Abstriche bei Ihren Erklärungen.
Nur ein paar schnelle Tests mit Ihrer App
Test 1.
Fügen Sie nur FontAwesome und Entypo hinzu
Wählen Sie alle Glyphen (~700)
Versuchen Sie, zum Vorschau-Tab zu wechseln
SEHR langsam. Vergleichen Sie mit dem gleichen auf Fontello.
Test 2.
Dasselbe, aber mit WebhostigGlyphs (~2000 ausgewählt). Nach dem Klick auf Vorschau friert die App lange ein, zeigt dann eine Vorschau mit kaputter Schrift an.
Alles in FF/Chrome unter Ubuntu.
Selbst wenn ich Kommentare zu einigen seltsamen Oberflächenlösungen überspringe, scheint Ihre letzte App im sehr tiefen Beta-Stadium zu sein. Vielleicht wird sie später besser. Aber im Moment hat selbst die Oberfläche ernsthafte Verzögerungen. Sie versuchen, das stabile Fontello mit Ihrer imaginierten zukünftigen Version zu vergleichen, "wenn es in Ordnung sein wird". Mit riesigen Übertreibungen zu Ihren Gunsten. Das ist nicht ernst und nicht ethisch.
Wenn Sie mehr Respekt brauchen – hören Sie auf mit Marketing-Buzz und Trolling. Machen Sie Ihre neue App zuerst stabil. Und seien Sie weniger kategorisch und korrekter mit Ihren Vergleichen. Sie sind nicht "der Marktführer" und nicht der Einzige, der weiß, wie man gute Projekte macht.
Die beiden von Ihnen bereitgestellten Tests spielen im Hinblick auf die tatsächliche und praktische Nutzung der App keine Rolle. Aber ich schätze jedes Feedback, da es mir nur hilft, meinen Service zu verbessern. Also, danke dafür. Und viel Glück bei der Lösung der Fontello-Schriftwiedergabeprobleme unter OS X.
Sehr interessanter Artikel, interessante Perspektive.
Nur zur Info, der Link im zweiten Aufzählungspunkt unter "Bye-bye FontForge" ist irgendwie kaputt...
danke, behoben
Ich verstehe nicht, warum einfarbig ein Nachteil ist. Das macht keinen Sinn, es ist eine Schriftart! Sie können sie beliebig einfärben...
Denken Sie an Icons wie diese: https://www.iconfinder.com/iconsets/flat-services-icons
Einfarbig bedeutet, dass jedes einzelne Icon nur eine Farbe haben kann.
Kein exakter Begriff. Das ist kein Nachteil, sondern eine technische Einschränkung. Mehrfarbig ist derzeit mit Schriften nicht möglich. Und ja, das kümmert fast niemanden :)
Vitaly, ich bin erstaunt, wie großzügig Sie sind!
Dieses Tool kostenlos und ohne kommerzielle Motivation anzubieten, ist ein großes Geschenk :-)
„Fontomas“ war eine Inspiration, als ich mein ähnliches (aber kommerzielles) Fontastic-Projekt startete.
Mir gefiel das fast "nicht-gestaltete" Aussehen von Fontomas, was die Benutzeroberfläche sehr leicht und übersichtlich machte.
Ich erinnere mich auch, dass Sie geholfen haben, meinen ersten Entwickler für Fontastic zu finden, das war auch sehr großzügig.
Machen Sie weiter so, wir werden Ihre neue Bibliothek für SVG-Transformationen für unsere nächsten Fontastic-Funktionen verwenden.
Für diejenigen, die es noch nicht kennen, schauen Sie sich hier meinen eigenen Icon-Font-Generator an: http://www.fontastic.me
Wir machen die Erstellung von Icon-Fonts zu einem unterhaltsamen Erlebnis!
Wow!! tolle Arbeit Kumpel..
Entwickler wie Sie geben uns Erleichterung :)
Ich habe Fontastic.me heute gerade entdeckt – was für eine großartige Ressource, und es ist absolut sinnvoll, eigene Icon-Fonts "erstellen" zu können und nur das einzubinden, was man für ein Projekt braucht. Eine responsive Design-freundliche Lösung für jeden Webentwickler! Ich hoffe, Sie können die grundlegenden Funktionen kostenlos anbieten & Viel Erfolg bei diesem Projekt!
Ich kann dem nicht zustimmen, dass „Fontforge für die automatisierte Schriftverarbeitung nicht praktisch ist“.
Fontforge unterstützt native Skripting (eigene) und Python-Erweiterungen. Ich sehe auch einige Erweiterungen für andere Sprachen (z. B. Lua).
Ich verwende selbst die C-Bibliothek von Fontforge in meinem Projekt pdf2htmlEX, was ziemlich gut funktioniert.
Apropos svg2ttf, es gibt ein Dienstprogramm namens FontCustom, das ebenfalls Fontforge verwendet.
Aber ich stimme zu, dass „Fontforge seltsame Fehler hat, die spezifische Workarounds erfordern“. Es wurde bis vor kurzem nicht ganz für Erweiterungen optimiert. Aber es wurde erheblich verbessert, viele Leute verwenden nur Fontforge-Skripte anstelle des Editors.
Entschuldigung, falls meine Worte als "FontForge ist schlecht" aufgefasst werden konnten. Ich hatte keine Absicht, das zu tun. Lange Zeit war FontForge die einzige Open-Source-Option für Schrift-Skripting. Das ist eine riesige Leistung. Und natürlich werden svg2ttf/ttf2woff/ttf2eot niemals vorgeben, "alles gleich, aber besser" zu tun.
Ich meine nur, dass für spezifische Aufgaben wie die Generierung von Icon-Fonts das Schreiben von JS-Bibliotheken erhebliche Vorteile gebracht hat. Selbst wenn wir die Diskussion über Workarounds und andere komplexe technische Details überspringen, ist die Möglichkeit, Schriften im Browser zu erstellen, ein Killer-Feature :). Auch spezialisierte Konverter sind bei der Installation einfacher, wenn man in node.js entwickelt – keine binären Abhängigkeiten.
Aus historischen Gründen behalte ich immer noch einen Satz FF-Skripte, die früher in Fontello verwendet wurden https://github.com/fontello/font-builder. Es wurde viel früher als FontCustom erstellt, aber nie als gute unabhängige Bibliothek beworben.
PS. Ich bin mit pdf2htmlEX vertraut, vielen Dank für Ihr Projekt.
@Vitaly Puzrin Danke für Ihre Erklärung! Keine Beleidigung, ich dachte nur, der ursprüngliche Ausdruck sei etwas irreführend. Aber tatsächlich mag Fontforge zu kompliziert sein.
Ich kann mir Ihre Bemühungen hinter den Bibliotheken vorstellen, ich erinnere mich, dass ich die TTF-Spezifikation mehrmals lesen musste und Stunden mit Tests verbracht habe, um die kniffligen Kombinationen von Aufstieg/Abstieg zu verstehen. Aber OMG, Sie müssen echte TTF-Schriften generieren...
fontello/font-builder, oh, ich wusste, dass ich diesen Namen schon einmal gesehen hatte. Eines der Skripte,font-merge.py, war *das Skript*, das ich gelesen habe, bevor ich FontCustom fand, obwohl ich die Geschichte erst jetzt kenne. Dieses Skript und auch das von FontCustom ließen mich erkennen, dass FontForge einzelne SVG-Bilder als Glyphen laden kann. – Ich hätte diese Funktionen nie selbst in der Dokumentation gefunden… – Kein Weg für mich, Type 3 Font-Unterstützung in pdf2htmlEX ohne sie zu implementieren. Danke! (Und ich freue mich zu hören, dass Ihnen pdf2htmlEX gefällt)Ich bin immer noch etwas verwirrt über „Schriften im Browser erstellen“, ich dachte, alles sei auf node.js aufgebaut, was nicht das JS ist, das im Browser läuft? Bitte korrigieren Sie mich, wenn ich falsch liege.
Übrigens weiß ich nicht, wie ich auf Ihren Kommentar antworten soll, da es keinen Link dazu bei Ihren Kommentaren gibt, wahrscheinlich weil das schon eine Antwort ist. Mal sehen, ob mein Hacking funktioniert...
@Lu Wang
Wenn Sie Code für
node.jsschreiben und keine integrierten Bibliotheken und andere Blobs von Node verwenden, ist es möglich, Ihren Code später zu „browserifyen“, um ihn im Browser auszuführen. Wenn Sie interessiert sind, empfehle ich Ihnen, mit diesen 2 Projekten zu beginnenes5-shim – „fixen“ Sie alte Browser, um die nützlichsten ECMAScript 5-Features zu unterstützen
webmake – fügt Node's CommonJS-Module (mit verschachteltem
require(...)) zu einer einzigen Datei zusammen, gut für den Browser.Der eigentliche Client-Bundling-Prozess in Fontello ist viel komplexer, aber die 2 obigen Links reichen aus, um die Prinzipien zu verstehen.
Ja, das ist kein Fehler, Fontello verwendet
svg2ttfauch auf der Client-Seite. Das ist leicht zu überprüfen, ohne in die Quellen zu schauen. Öffnen Sie die Browser-Entwicklertools, importieren Sie ein benutzerdefiniertes Bild/eine Schriftart und prüfen Sie, ob keine Serveranfrage erfolgt. Gehen Sie dann zum DOM-Tab und Sie werden sehen, dass die Icons über @fontface angezeigt werden.@Vitaly Puzrin Ich verstehe. Danke für die Hinweise, sieht interessant aus. Ich werde sie mir ansehen!
Ich erinnere mich, das früher benutzt zu haben. Ihr Artikel hat mich dazu gebracht, es wieder auszuprobieren, und es funktioniert perfekt, danke. :)
Sie können Facebook-Klon-Skripte hier erhalten: http://facebookclonescript.com
Sehr cool. Ich fange an, Icon-Fonts bei der Entwicklung zu verwenden, und das sollte sehr nützlich sein.
Ich schätze den Tipp, dass FontAwesome bei Inkrementen von 14 Pixeln am schärfsten aussieht, ich wusste nicht, dass es einen Sweet Spot hat, aber es ergibt Sinn.
Ich benutze Fontello seit über einem Jahr täglich für meine Arbeit. Es ist ein unglaublich nützliches Projekt! Entwickler und Repositories-Betreuer hören auf Anfragen, antworten schnell und klug :) Die neue Funktion "Eigene SVG importieren" macht Fontello noch besser. Danke für Ihre Arbeit, Leute.
Es wäre großartig, wenn jeder benutzerdefinierte Schriften, die in Fontello erstellt wurden, teilen könnte.
Für Leute, die eine weitere Alternative suchen, die es ermöglicht, Schriftensets in einem Konto zu speichern, gibt es auch http://fontastic.me/.
Hallo Nico!
Bitte erstellen Sie ein Ticket mit einer Beschreibung, wie die Sharing-Funktion genutzt werden kann. Wenn das Teilen für begrenzte Zeit ausreicht, kann das gemacht werden.
+1 für Fontastic. Ich habe alle Dienste ausprobiert und bin mit Fontastic am zufriedensten. Es ist intuitiver und funktioniert einfach rundum gut. Der Support ist ebenfalls großartig.
Sowohl Fontello als auch IcoMoon müssen an ihren Designs arbeiten. Fontello, das auf Twitter Bootstrap basiert, zu sehen, ist peinlich angesichts der Größe des Projekts. Es sollte nicht so viel Aufwand kosten, ein benutzerdefiniertes Design zu erstellen.
Ein großer Nachteil von Icon-Fonts ist ihre mangelnde Responsivität.
Wenn ich z. B. das Bootstrap-Grid verwende, muss ich die Icon-Fonts mit einem Typ-Plugin wie flowtype auslösen, um das Icon an die variable Grid-Größe anzupassen.
Das ist ärgerlich, weil diese Art von Plugins immer mit anderen Plugins wie Modal-Fenstern und ähnlichem kollidiert.
Ich habe dies noch nicht auf Konflikte mit anderen Plugins getestet, aber haben Sie es mit FitText.js versucht?
Ich bin ein RIESIGER Fan von Fontello. Habe einen ziemlich kurzen Artikel über die Verwendung von Icon-Fonts mit Fontello geschrieben. Ziemlich einfach, aber ich dachte, ich teile es mit Ihnen.
OF TOPIC – @Todd, ich habe Ihren Artikel über Fontello gesehen und aus den Screenshots glaube ich, dass Sie Sublime Text verwenden. Wenn ja, welches Theme verwenden Sie? Ich mag das Farbschema für den Code, das Sie verwenden.
Vielen Dank im Voraus.
Hallo, ich benutze Sublime Text, aber das waren keine Screenshots. Es sind Codebeispiele, die ich in den Beitrag eingefügt habe.
Bitte posten Sie weitere Kommentare zu meinem Blogbeitrag auf wearewebheads.com, danke. (Entschuldigung dafür, Chris)
Ich benutze Fontello seit einigen Monaten und hatte vorher überhaupt keine Icon-Fonts benutzt, weil es sehr ärgerlich schien, eine ganze Schriftart für 1 oder 2 Icons darin zu bekommen. Es ist wirklich ein tolles Produkt, und jetzt, wo ich die ganze Komplexität hinter den Kulissen sehe, finde ich es noch großartiger. Machen Sie weiter so, Mann! Wirklich nützlich! Vielen Dank!
Fontello, eine großartige Lösung für die Entwicklung und Gestaltung responsiver Websites – Gut gemacht, Vitaly – wird bald meine Lieblingsseite sein!!
Vitaly,
Ich wünschte, wir wären in derselben Stadt, dann würde ich Ihnen gerne ein oder zehn Bier/Kaffee/Wodka ausgeben. Fontello hat mir bei vielen Projekten so viel Mühe erspart. Was für mich heute interessant war, war, dass ich die Unicode-Werte jedes Icons einstellen konnte, so dass ich ein partielles Alphabet aufbauen konnte (nun, ich hätte das ganze machen können, aber ich brauchte nur 4 Buchstaben), wobei 2 der Icons SVGs meiner eigenen Kreation waren.
Ich kann Ihnen gar nicht sagen, wie viel Ärger ich früher mit FontForge hatte, um zum gleichen Ergebnis zu kommen.
Persönlich kann ich Ihnen für Ihre Bemühungen nicht genug danken. Sobald ich Zeit habe, werde ich ein oder zwei SVG-Icons von den sozialen Netzwerken erstellen, die ich in der Vergangenheit erstellt habe.
Alle reden davon, dass Icon-Fonts die Zukunft sind, und mit Ihrem Artikel fange ich an, es zu sehen. Aber Icons sind nicht nur Piktogramme... was ist mit komplexeren Formen?
Irgendwie kann ich meine Fontello-Icons mit IE 11 nicht anzeigen. Hat jemand eine Lösung für mich?
lol Aliens = Apple und Predators = Microsoft :)