font-icons vs png-icons

verwende ich Symbole für Etiketten -, aber ich sah diese website: www.fontello.com wo können Sie schriftart mit Symbolen.

Aber wenn ich font mit icons, ist es größer als alle meine icons, denn es ist svg, ttf, woff und eot, alle 4 Schriften sind größer, dass alle png-icons.

@font-face {
  font-family: 'fonticons';
  src: url("../font/fonticons.eot");
  src: url("../font/fonticons.eot?#iefix") format('embedded-opentype'), url("../font/fonticons.woff") format('woff'), url("../font/fonticons.ttf") format('truetype'), url("../font/fonticons.svg#fonticons") format('svg');
  font-weight: normal;
  font-style: normal;
}

Alle meine icons sind optipng komprimiert .png-Bilder.

Funktioniert das auf allen Browsern ?

Also warum sollte ich diese schriftart-Methode ?

Und eine alternative für fontello.com ?

  • Beide sprite-Karten-und symbol-Schriftarten als Symbole haben Ihre vor-und Nachteile. Eine einzelne Datei herunterladen, ist viel besser für die user, als dass ein download mehrere kleine Bilder, auch wenn die kombinierte Dateigröße der alle die kleinen Bilder, die kleiner ist als die einzelne Datei.
InformationsquelleAutor Mirza Delic | 2012-09-20
  1. 17

    Gute Frage. ich bin derzeit am Experimentieren mit Anwohner Manfred Meier und font-icons zu sehen, wenn es ein brauchbarer Ansatz ist.

    Es ist ein brauchbarer Ansatz. Ich habe verwendet die schriftart-basierte icons in der Produktion-Anwendungen und-getestet auf fast jedem gängigen browser/Gerät (Anwohner Manfred Meier hat Beispiele, die auch Unterstützung IE7). Ich habe nur gute Dinge zu sagen über Anwohner Manfred Meier, aber Sie können mit jedem tool, das Sie möchten.

    Font-icons skaliert werden können, um jede wie auch immer (verhältnismäßig) Abmessungen gewünscht werden und arbeiten an der Pixeldichte. Wenn Sie sich Ihre Website auf einem high-density-Displays (z.B. Apple Retina, und immer beliebter auf allen mobilen Geräten) es gibt einen enormen Unterschied zwischen einem raster-format (wie PNG) und ein Vektor-format.

    Können Sie festlegen, alle icons in einer einzelnen Datei (wie ein sprite), aber im Gegensatz zu einem sprite, die Sie nicht haben, um sorgen über die Abmessungen der Elemente innerhalb der Datei. Darüber hinaus können Sie die Größe jedes Element unabhängig von anderen Elementen in der Datei.

    Überlegungen

    • Benötigen Sie zum verwalten der schriftart-Datei. Diese sind nicht lesbar, so benötigen Sie ein Werkzeug zu verwenden.
    • Gibt es entsprechende CSS-Selektoren zu halten (in der Regel ein Selektor pro Symbol).
    • Zusätzliche markup ist gelegentlich notwendig, um einen bestimmten Effekt/ein problem zu lösen.
    • Kleinere Dimensionierung Fragen; nicht alle icons füllen Sie eine box gleichmäßig und Sie unterliegen den text-rendering Eigenheiten der einzelnen browser.

    Diese überlegungen sind wahrscheinlich weniger Arbeit als die Verwendung von sprites oder erstellen von PNGs/SVGs für jedes Symbol.

    Beachten Sie, dass eine schriftart, die das Symbol enthält keine Farbinformationen. Allerdings können Sie Stil, wie Sie einen beliebigen anderen text. Dies schließt auch die Verwendung ARGB-Farben und anwenden von erweiterte CSS-Effekte wie schon in den Kommentaren.

    In Bezug auf Datei Größe, im Hinterkopf behalten, dass ein browser wird fast nie download alle 4 font-Formate. Richtig gemacht, in der Regel nur eine heruntergeladen werden.

    Ein alternativer Ansatz ist die Verwendung von SVGs (nicht SVG-fonts) für die icons. Browser-Unterstützung für SVGs ist weniger als @font-face, so benötigen Sie eine raster-fallback.

    • Danke für die Antwort, also sollte ich es nutzen, es nicht ein problem haben ?
    • Wenn Sie Leben können, mit den Einschränkungen, die ich aufgeführt, es scheint wie eine gute Ansatz. Ich bin derzeit in meinem ersten Projekt mit font-icons und so weit es gut geht. Die große entscheidende Faktor, ob oder nicht Sie kümmern sich um high-density-displays. Wenn Sie don ' T care, nur verwenden Sie PNG-sprites. Wenn Sie sorgen, font icons, die toll Aussehen.
    • Nur um Sie auferstehen von diesem etwas, Sie können in der Tat verwenden Sie CSS-Verläufe auf das Symbol Schriftarten sowie übergänge zu erleichtern, eine Farbe ändern. Zusätzlich können Sie animiert werden, über die Verwendung von css-Animationen/Transformationen, die unmöglich wäre mit raster-Bilder, es sei denn, Sie entscheiden sich für ineffiziente gifs.
    • Versuchen Sie icomoon.io - es hat einige features, die nicht auf Anwohner Manfred Meier, wie die Möglichkeit zum hochladen benutzerdefinierter SVG-icons
    InformationsquelleAutor Tim Medora
  2. 4

    Dieser praktischen Seite zeigt Sie mit CSS-Funktionen werden unterstützt durch die browser. In diesem Fall < IE9 kann Ihnen Probleme.

    http://caniuse.com/#feat=fontface

    Persönlich bevorzuge ich den Einsatz von CSS-sprites für mein UI-Elemente, um die Konsistenz zu gewährleisten acroass Browser.

    • Ich denke auch CSS-sprites sind die bessere Wahl. Wenn Sie benutzerdefinierte Schriftarten, die nicht arbeiten, haben fallbacks. Wenn Sie Ihre Symbole geladen mit @font-face Versagen, Sie sind einfach leer.
    InformationsquelleAutor Diodeus - James MacFarlane
  3. 4

    schnelle disclaimer: ich habe ein Symbol-schriftart-Bibliothek namens pictonic.

    wenn ich font mit icons, ist es größer als alle meine icons,
    da svg, ttf, woff und eot, alle 4 Schriften größer sind
    dass alle png-icons.

    in Bezug auf die Dateigröße, dann finden Sie vielleicht der folgende Vergleich der pngs vs icon fonts interessant:

    http://blog.pictonic.co/post/32260064131/icon-fonts-could-speed-up-your-page-loading-time-by-14

    sollten Sie sich vergewissern, dass die icons werden umgewandelt in Vektor-format mit Ablaufverfolgung. da viele Vektorformate wie svg unterstützt auch bitmaps, wenn Sie Ihre Symbole werden als bitmaps importiert werden, die Sie nicht feststellen, dass die Dateigröße bezogene Vorteile der Umwandlung in eine vektorisierte schriftart.

    in meiner Erfahrung auch bei 16x16px, eine ttf-Schrift verwendet werden sollte, die viel kleiner als die kombinierte Dateigröße von 20 oder so Ikonen. wie das Bild vergrößert diese Kluft verbreitert sich, wie Vektoren haben die gleiche Dateigröße an jeder Skala.

    Funktioniert das auf allen Browsern ?

    hängt davon ab, welche Methoden Sie verwenden. pictonic ist getestet auf allen Browsern wieder auf ie5, erfordert aber ein bisschen js für alte ie-Versionen (5-7). Also in der Theorie ist es möglich, die get-icon fonts in allen Browsern.

    Also warum sollte ich diese schriftart-Methode ?

    icon-fonts sind wirklich vielseitig, Sie können manipulieren, mit css in einer Art, die Bild-icons scheinen Recht unflexibel. Hier ist eine demo: https://pictonic.co/#main-demo

    so zum Beispiel, können Sie Experimentieren mit Ihrem layout, und ändern Sie die Farbe, Größe und Schatten alle Ihre icons mit wenigen Zeilen css. dies ist ziemlich praktisch.

    auch, da Sie auf Vektoren basiert, Sie sind retina-ready out of the box, so Sie sehen fantastisch auf retina-Bildschirmen, wie die auf apple-retina-displays (retina-macbook, iphone 4+, iPad 3+), in der Erwägung, dass Bilder benötigen, media queries, um die swap-in-Doppelbeschluss-Versionen, die noch mehr Speicherplatz.

    ich glaube, Sie sind ziemlich effizient wenn Sie das richtige format.

    Und eine alternative für fontello.com ?

    pictonic nicht die Möglichkeit zum import von Benutzer-generierten Symbole noch, aber es erlaubt Ihnen, zu generieren benutzerdefinierte Symbol-Schriften von über 2000 herrlichen Ikonen, darunter eine ziemlich große freie iconset. und wir fügen immer mehr, so zu tun schauen

    InformationsquelleAutor alzclarke
  4. 2

    Andere alternative für dich sein könnte:
    http://fontastic.me/

    😉

    InformationsquelleAutor mim
  5. 1
    1. Mit font-Symbole, die font-Datei, die die Erweiterung .woff, .ttf, .eot, .svg-und css-Datei für die schriftart. Sie sind weniger in der Größe und und Sie können ändern, die Größe der Icons, wenn erforderlich, mit Bild-Dateien, png - /jpeg-es verzerrt das Bild, - Datei, wo die Schrift-Symbole ordnungsgemäß skaliert werden.
    2. Mit mehrere Bilder, die Sie haben, um mehrere http-Anforderung an den server, der vermieden werden kann, hier.
    3. Die schriftart Symbol-Dateien sind auch auf cdn daher Sie nicht haben, um die Anforderung an den server, wenn einige der früheren website hat es bereits im Cache in Ihrem browser.
    4. Mit Anwohner Manfred Meier können Sie anpassen und verwenden Sie nur die Symbole, die benötigt werden.
    5. Es ist auch fontawesome aktuellen version 4.2 wo kann man die schriftart der icons, wenn Sie benötigen support für ältere Versionen der Browser können Sie entscheiden sich für die alte version keine 3.
    6. Sie können auch passen Sie es mit LESS/SASS.
    7. Eine weitere option ist die Verwendung von css-sprites optimieren Sie es mit traditionellen Methoden oder über online-Dienste.
    8. Verwendung in html ist ziemlich einfach, sobald Sie sicherstellen, dass die css-Dateien und font-Dateien werden im browser geladen, die Sie gerade brauchen, um hinzuzufügen, Klasse name, um das html-element, und Sie sind gut zu gehen, die Sie dann anpassen können die schriftart, - Größe, - Farbe, hintergrund-Farbe nach Ihren wünschen.

    Font awesome

    Anwohner Manfred Meier

    Finden Sie die CDN hier

    InformationsquelleAutor Nitesh
Schreibe einen Kommentar