Verwendung von Vektor-Icons als Webfonts anstelle von PNG in jQuery UI CSS Framework

Question

Ich habe ein gemeinsames Verständnis Problem und es ist unklar für mich, was wäre der beste Weg, um fortzufahren. Also beschloss ich, die Community um Rat zu fragen.

jQuery UI definiert CSS Framework die Klasse „ui-Symbol“ und viele spezielle Klassen für verschiedene Standard-Icons enthält (320 total icons), die man auf the test page sehen können. Es gibt viele Plugins, Webseiten usw., die das CSS-Framework verwenden. Zum Beispiel jqGrid Pluging verwenden Sie es. Das Raster, das von jqGrid erstellt wird, enthält die Symbole.

Nach the answer über die Verwendung von Font Awesome icons Schreiben anstatt einige jQuery UI icons Ich frage mich regelmäßig die gleiche Frage: warum jQuery UI CSS frameworkRaster Symbole statt Vektor basierte Symbole hat? Meiner Meinung nach wäre es sehr praktisch, eine andere Implementierung des Icon-Teils von jQuery UI CSS Framework zu haben. In diesem Fall könnte man einfach das jQuery UI Theme ersetzen und Icons haben, die besser implementiert sind.

Wir leben jetzt in der Zeit von Monitoren mit hoher DPI (Ereignis für Tablet PC und Smartphones). So viele Leute verwenden Zoom-Einstellung höher als 100% als Standardeinstellung im Web-Browser. Vergleicht man

mit

man sehen würde, unterscheiden sich sehr deutlich.

Aktuelle Versionen von Webbrowsern (einschließlich alten IE7) unterstützt vektorbasierte Webschriftarten in mindestens einem der Formate WOFF, EOT, TTF, OTF oder SVG. Die Schriftarten sind Teil des W3C Working Draft-Dokuments "CSS Fonts Module Level 3" (siehe http://www.w3.org/TR/css3-fonts/#src-desc).

Warum also nicht ersetzen aktuelle PNG-Icons von jQuery UI mit Web-Schriftarten Alternativen? Es gibt viele freie Open-Source-Fonts, die bereits (siehe here, here, here, here usw.) die meisten (aber nicht alle) Icons zur Verfügung stellen, die man braucht.

Zusätzlicher Vorteil der Verwendung von Webfonts, die ich sehe, wird die Erstellung von jQuery UI Themes vereinfachen. Wenn ich die Bilder innerhalb von Base Theme verwende, oder wenn ich dort mit den entsprechenden Bildern eines anderen Themes vergleiche, dann sehe ich die Farbe, die in den Bildern als einziger Unterschied verwendet wird. Im Fall der Verwendung Vektor-Fonts kann man angeben, nur color, background-color oder linear-gradient oder radial-gradient CSS-Stile verwenden, um Farben zu ändern oder schöne Farbeffekte zu erzeugen:

ich viele advantaged in der Nutzung von Vektor-Icons sehen, aber ich habe bis jetzt keinen guten Platz gefunden, wo man die Feature-Anfrage für Vektor-Icons platzieren könnte. Ich postete the feature request und this one, aber ich denke mehr und mehr, dass wir hier haben gemeinsame jQuery UI Framework Problem.

Nach release of jQuery 2.0, die Unterstützung von IE 6/7/8 fallen lassen, ist es nicht die Zeit zu prüfen, Raster-basierte PNG-Icons durch vektorbasierte Web-Fonts zu ersetzen?

Vermutlich vermisse ich einige wichtige Nachteile der Verwendung von Vektor-basierten Web-Fonts? Sehr schlechte Leistung zum Beispiel (die ich bis jetzt nicht gesehen habe) oder andere Dinge? Ist das Erstellen aller benötigten Symbole zu komplex? Gibt es noch andere Probleme?

Ich beschloss, die Frage zu stellen, um die Aufmerksamkeit anderer Leute auf das Problem zu lenken, das ich sehe. Ich habe Angst, dass ohne die entsprechende Rückmeldung von der Community meine Feature-Anfrage keine Konsequenzen haben wird.

Welcher Weg wäre der beste für die Platzierung solcher Feature Requests? Ich muss hinzufügen, dass das Erstellen von Schriftarten oder Bild nicht das Thema ist, wo ich selbst gut bin. Daher kann ich selbst nicht an der Implementierung teilnehmen. Es tut uns leid.

Alle Ratschläge oder Meinungen zum Thema sind willkommen!

Answer 1

Schriftarten eignen sich nicht zum Implementieren von Symbolen. Schauen Sie sich die Verkehrszeichen an - mindestens drei Farben sind erforderlich. Zu diesem Zweck werden die Zeichensätze durch SVG oder ein ähnliches Format ersetzt, möglicherweise mit Hinweisanweisungen.

warum jQuery UI-Framework-Raster-Symbole statt Vektor hat

Ich denke, von einem Mangel an Standards für vektorbasierte Symbole Realisierung in diesem Moment.

Ist die Erstellung aller benötigten Symbole zu komplex? Gibt es andere Probleme?

Ja, es ist nicht so einfach, alle Symbole in einer Schriftart zu erstellen, die in allen Browsern gut funktionieren. Aber es gibt ein anderes Problem. Die gute Lösung ist, das Google-Logo im Vektorformat und nicht im Raster zu implementieren. Wie Sie sehen können, ist dies noch nicht geschehen.