Share
Sehen wir uns die Leistung Ihrer Site an, indem Sie die Anzahl der HTTP-Anforderungen reduzieren. Wir werden eine Technik nutzen, die als Daten-URI-Schema bekannt ist. Codieren von Bildern und Schriftarten in reine Datenzeichenfolgen, die direkt in Ihre Markup- und Stylesheets integriert werden können.
Miniaturansicht: Die Broccolidryiconsaniconsetitisfullof… Icons von Visual Idiot (wir werden diese Icons in einer Minute verwenden…)
Da Internetverbindungen schneller wurden und Computer leistungsfähiger wurden, war die Website-Performance eine oft übersehene bewährte Methode. Um sicherzustellen, dass Ihre Website gut funktioniert, ist es heute unerlässlich, um sowohl Ihre Nutzer als auch die Suchmaschinen zufrieden zu stellen. Dies gilt insbesondere für den Zugriff auf die Site über mobile Daten sowie Telefone und andere Geräte, die nicht mit Strom versorgt werden.
CSS Sprite Sheets: Best Practices, Tools und hilfreiche Anwendungen wurden bereits vorab auf Webdesigntuts + beschrieben und zeigen, wie Sie die Leistung verbessern können, indem Sie HTTP-Anforderungen reduzieren und die Gesamtgröße der Image-Dateien reduzieren. Wussten Sie jedoch, dass Sie ein Bild (eigentlich binäre Daten) in HTML oder CSS darstellen können, indem Sie nur eine ASCII-Textzeichenfolge verwenden?
Diese Technik wird als Daten-URI-Schema bezeichnet und ist in der Tat nicht neu. Obwohl Daten-URIs seit mehr als zehn Jahren im Umlauf sind, haben sie sich erst vor kurzem durch die weit verbreitete Browserkompatibilität und die Fokussierung auf die Verbesserung der Website-Performance durchgesetzt.
Der Hauptvorteil der Verwendung von Daten-URIs ist die Leistungssteigerung. Alle Ressourcen, die in Ihrer Site verwendet werden, werden von Ihrem Browser mithilfe einer HTTP-Anforderung abgerufen. Dies umfasst alles von Stylesheets über JavaScript-Dateien bis hin zu Bildern. Unabhängig von der Geschwindigkeit der Internetverbindung beschränken fast alle Browser die maximale Anzahl gleichzeitiger HTTP-Anforderungen auf zwei gleichzeitig, was zu einem Datenengpass führt. Je mehr HTTP-Anforderungen gestellt werden müssen, desto schlechter ist die Gesamtleistung der Site.
Durch die Kombination von Bilddaten in HTML oder CSS der Website ist es für den Browser nicht mehr erforderlich, zusätzliche Ressourcen abzurufen. Obwohl rohe Base64-codierte Daten im Allgemeinen als um 33% größer angesehen werden als das optimierte Gegenstück (zum Beispiel ein Bild), ist der Unterschied in der Dateigröße nach dem Importieren und CSS-Datei-Optimierung im Allgemeinen vernachlässigbar.
Ein Daten-URI besteht im Wesentlichen aus binären Daten, die in einem Base64-Format codiert sind, zusammen mit einigen zusätzlichen Informationen für den Browser, darunter ein MIME-Typ, ein Charset und das Codierungsformat (Base64)..
Die Daten-URI (in ihrer einfachsten Form) sieht folgendermaßen aus:
data: [] [; charset =] [; base64],
Um einen Daten-URI als Inline-HTML-Bild zu verwenden, sieht das Format folgendermaßen aus:
Um einen Daten-URI als sich wiederholendes Hintergrundbild in CSS zu verwenden, lautet das Format wie folgt:
Accentsconagua
body Hintergrundbild: URL ('data: image / png; base64,'); Hintergrundwiederholung: Wiederholung; Alternativ kombinieren Sie die Hintergrundelemente mit der CSS-Kurzschrift:
div.logo background: url ('data: image / png; base64,') Keine Wiederholung oben links; Marge: 20px 10px 0 10px; Während wir die Verwendung von Daten-URIs anhand von Bildern veranschaulichen, können fast alle Medien verwendet werden, einschließlich Multimedia-Dateien, Schriftarten (wie wir in Kürze sehen werden) und vieles mehr.
OK, lassen Sie uns mit ein paar Beispielen praktisch werden. Nehmen wir das folgende Bild (eine sich wiederholende Kachel, die ich von Subtle Patterns heruntergeladen habe), konvertieren Sie es in einen Daten-URI und verwenden Sie CSS, um einen sich wiederholenden Hintergrund für eine Site oder ein Interface zu erstellen.
Obwohl Daten-URIs möglicherweise ziemlich funky aussehen, ist der Prozess zum Erstellen sehr einfach.
Gehen Sie zunächst zum Web Semantics Data URI Converter und laden Sie das Image hoch, indem Sie den Dateispeicherort des Images auswählen und auf das Werkzeug "Image konvertieren" klicken:
Wenn Sie die Seite nach unten scrollen, sehen Sie, wie dieses Bild wie base64-codiert aussieht:
Da wir einen sich wiederholenden Hintergrund für unser Projekt benötigen, müssen wir das CSS, das uns das Tool gibt, ändern.
Kopieren Sie für einen sich wiederholenden Hintergrund das folgende CSS und fügen Sie es ein:
div.logo Hintergrundwiederholung: Wiederholung; Hintergrund-Bild: URL (Daten: image / JPEG; Base64, / 9j / 4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP / sABFEdWNreQABAAQAAABkAAD / 4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu 7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI + / + PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI + IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlCNDA1N0EyRkNEQzExRTE5NEEyOEY1NEFFMzlEMzVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlCNDA1N0EzRkNEQzExRTE5NEEyOEY1NEFFMzlEMzVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUI0MDU3QTBGQ0RDMTF FMTk0QTI4RjU0QUUzOUQzNUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUI0MDU3QTFGQ0RDMTFFMTk0QTI4RjU0QUUzOUQzNUUiLz4gPC9yZGY6RGVzY3JpcHRpb24 + IDwvcmRmOlJERj4gPC94OnhtcG1ldGE + IDW / eHBhY2tldCBlbmQ9InIiPz7 / 7gAOQWRvYmUAZMAAAAAB / 9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgICAgICAgICAgIDAwMDAwMDAwMDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP / wAARCAAnACgDAREAAhEBAxEB / 8QAowAAAgICAwAAAAAAAAAAAAAABwoICwUGAwQJAQABBAMBAQAAAAAAAAAAAAAFAwQHCAACBgEJEAAABgIBAwIDBQkAAAAAAAABAgMEBQYRBwgAIRIxQVEyCWGBIkIWcZGhsSNjJtYKEQACAAUBBAYFCAsBAAAAAAABAgARAwQFBiExQRJRYXGx0QeRIjITFPBCUnJkdMTUgWKSI1Ozw9OUtHUX / 9oADAMBAAIRAxEAPwBWSkVqnzdWqU1PVCnzs3NVWtTM3NTtVr0xLzMxKQrCQlJWVlJOOdP5GSkXzhRZwusodVVU4mMYRER6PUaVM0V9RCSo + aJzkJ8IoVrDUmq6ep8rRoZXK06KZO7VFS8uUVVW4qKqqqVQqqoACgAAASEFqLoWsjgUT6y1gf0EQU1zSlPsEPxQZu / b26dpSt9xSnP6o8IjW / 1XrdSQuczg7MjeD + vBIjtd6kOBc6k1Ec39zVtBP + 8DV4cgGelVpW4Mmp05fUHhHGXmsPMFSZah1CB1ZO / H4iNoS1vp4QER05pzAYxnU2uxz3ER7 / pwRHAB0r7i3kJU6X7C + EAqmtPMUHZqPUc / + + RkPzEDXbdC1cw1hst9Fau1dEycdru9SEZKQ uKVEysbJx1XlXjCQjZKPg279g + ZO0CKpLJKEUTOUBKICGekbmhbChU5UpzCE7EEwZHjKO48u9X69r67wdG7z2erWtTNWKPTq5G9qU3R7qkro6PXZHRlJVlYFSDIgxHvXbvwo1F7 / JSKeGBEAxiuRgeg / H + PQ2k4FNV4co7h1RMGsLQtqbKOBvyd5 / s1Ym5pnjFyk3nXndv0jxt3 / uOpR004rcjZ9V6e2HsKusLC0ZRsm8gnk3Uq5LxrWZaxsw0cKNTqlXIg5RUMUCqkEXDVaaH1mUGW47I5JNJZ7M0WusVYXdzQVipalRq1F5gAeUlFIDAEGR2gMOBE7QAv0 BROxOEfEQgfAvGzTRf5UsOgXxFf6b ++ + k + MX0by80A3tYPDntsrb + 3Ffjz04p8htUcheX99PxY3JrnjxXuS + 7yVG7Bo26UzS8PruR3XYoLWZq5YyVaNosfTZGOexbWEM2WIzcJLtiNhMCiYD0NtWp1KSKXU1eUTE5nZvnx6Y ffmV5eZfGapy1 + / + b4q6ttNpfVTTqC2qJbLTaqRT5H5BSVCWCoFIXaqqNwjyl2zLCtrDZxAN2U1tfifMH5qnMZDAewZ63uD 4qSl7B7oC6Ax / u9cYNpezmrA7vtdGIuUl6ZOnUsoGEPGnVMuMh2 / x + NDP2Z6G0yORJ / RHcInrU1BzqDJbuU5G7O77RUPRth8D / mk5k8U9CcDtp1LenJ3jrpa3ynLW / WKPq23d26y1rY5CuudOaEjGk / Hwl1tUFJvIR1JRTtum6SSOgddqsmBvNM4A0vFZqgIBIC9HWdkTP5QZDE43Tdxb3Vzb0axvnbleoiNI0qInJiDIlSAeMiN4MNwKWNBJQ6SmCqJnMmcooq5KcgiUxRwYQyAh0yibYX3 + vTzG4r2f6b3LjR1b5Ncd7Bu5jZdNV1zpyA3XrOZ2s2slM5S6iXuNfca6jbU8uCE3U20G / Uk2hm RV2BGS4rlTBFTxdWqsKyuQeWe / wDREV + amSxd1obJ46jc27XpRV92tRDUmtVCy8gbmmoBmJTEjPdFdvseWBXX2wCeXz0O6J / MGB861KFD3yPr2z0WrOBSdVO0o3DqMVC0dj + TV2IaRJGVszPsuaRgC1N741SpEESh41Ssl7gP5YKPD2x646ZISEXb80d0S9naAfP35IInf3PEfxnjbkJAMBkfTv6iOfh6d / X4h6dL80tjQAr46e7j2fL0Q + 3I / wDUj9PR / JSDxLWXN1Mjt67dESLqXQKoJEcOFFSkBQeVqInAgHx5CQmfXAenQ74WrKeyUWK / 9S02F5mS7HbTX0e33QmLyp3XX968pOTm8Kkymompbq5Fbx23Vouzox7SyR9a2VtG1XWAZWBpESc5FNJxpEziJHabV67QTcFOVNZUoAcz + nNaag7wPlwiuepHt8rnrrJW9NjRrV3dSdhkxnIjpG47SOsxF27SvnSronkf6lOtRM5EwfjgJEv7O + esqmdNj + qe49UbactJaixrBJSyNqfRcUz0QKImTbRcRDRboZEzmMhoiOcnj4OwzUeddhHNWiykfMwkVIw0uwUUREyLpo4XauEhKokochimFslSQAIMpDgeiJCzGLuGzF46 / CkNeVztubRTtqudqtWDKdu1WAYGYIBEZQlkYh8pZwe / tTrqPf7q7jPW / NTnxn2HwgcMPeSJBt + X73Zy / nx2iWZkAgPjP5yHYaZdh7 / YIVzPWF14zI7D4Q2fD3vH4Qj73Zj8RHP + qG3snYfupd6 / 13rFccAZdQPhCBwtx02n + XY / mIw1lsKDmt2RsVOc83VdnWpBcVS3Mm5TuYp4iQ7h6 / g2rFm3IdQBUVWUTSTIAmOYCgI9eVHUg7Dzcp4HoPVuglhMNcLm7Fy1qFW9oNsurMn1ayGQVKxZiZSCqCSZAAkx / 9K = );
Nehmen wir ein noch einfacheres Beispiel, indem wir das folgende Bild in einen Daten-URI konvertieren und es als Inline-Bild in unser Markup einfügen:
Führen Sie einfach die oben genannten Schritte aus, um das Bild in ein Base64-kodiertes Bild zu konvertieren, und kopieren Sie das vom Tool generierte HTML-Markup (aus dem Bereich "Als Bild"), und fügen Sie es auf dieselbe Weise direkt in Ihr HTML-Markup ein wie beim Einfügen ein regelmäßiges Inline-Bild.
Der endgültige Code für dieses Beispiel sieht folgendermaßen aus:
Es gibt keine wirklich harten Regeln, wann Daten-URIs verwendet werden sollen, um Site-Assets zu ersetzen. Es gibt jedoch eine Reihe von Nachteilen und Besonderheiten, die zu berücksichtigen sind, wenn Sie entscheiden, ob Sie Daten-URIs verwenden möchten oder nicht.
Erinnerst du dich, dass ich das gesagt habe? irgendein Binärdaten können im Daten-URI-Schema verwendet werden? Nun, da wir uns mit base64-kodierten Bildern befasst haben, wollen wir nun einen Icon-Font in einen Daten-URI konvertieren und in ein Projekt implementieren.
Tatsächlich passen Daten-URIs ideal zu Symbolzeichensätzen, insbesondere wenn Sie nur wenige Symbole mit einer kleinen Dateigröße verwenden möchten.
Wir werden die Online-Web-App IcoMoon verwenden, um einen benutzerdefinierten Zeichensatz zu erstellen, den Daten-URI auszugeben und den endgültigen CSS-Code zu generieren.
Gehen Sie zunächst zur IcoMoon-Site und klicken Sie auf den Link "Start Using The App":
Durchsuchen Sie als Nächstes entweder die Zeichensätze, um Ihre benutzerdefinierten Symbolschriftarten auszuwählen, oder verwenden Sie alternativ das Suchfeld oben links auf der Seite, um nach Schriftarten zu suchen, die den Tags "Kommentar", "Herz", "Auge" und "Suche" entsprechen..
Ich habe in diesem Beispiel den Broccolidry-Zeichensatz von Visual Idiot verwendet.
Wechseln Sie als Nächstes zur Seite mit den Downloadeinstellungen, indem Sie auf die Schaltfläche "Schriftart" am unteren Bildschirmrand klicken:
Ändern Sie auf der Seite mit den Downloadeinstellungen die Basislinie in 10%. Klicken Sie auf das Einstellungssymbol, um die erweiterten Optionen anzuzeigen, und aktivieren Sie das Kontrollkästchen "Base64 Encode & Embed in CSS". Klicken Sie auf das Symbol "Speichern", um Ihre Schriftart herunterzuladen.
Nachdem Sie die benutzerdefinierte Schriftart heruntergeladen und extrahiert haben, können Sie die Datei 'index.html' öffnen, um Ihre Schriftart und ihre Unicode-Paarungen anzuzeigen:
Nachdem wir nun einen benutzerdefinierten Zeichensatz für Symbolsymbole erstellt haben, sehen wir uns an, wie wir ihn in einem Projekt verwenden können.
Öffnen Sie zunächst das im IcoMoon-Download bereitgestellte Stylesheet und suchen Sie das folgende CSS. Da es im Namen des Spiels darum geht, HTTP-Anfragen zu reduzieren, werden wir das gesamte CSS kopieren und in unser eigenes Stylesheet einfügen.
@ font-face font-family: 'customFont'; src: url (Daten: Schriftart / svg; charset = utf-8; base64, PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI / Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE + ClRoaXMgaXMgYSBjdXN0b20gU1ZHIGZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uCjEKPC9tZXRhZGF0YT4KPGRlZnM + Cjxmb250IGlkPSJjdXN0b21Gb250IiBob3Jpei1hZHYteD0iNTEyIiA + Cjxmb250LWZhY2UgdW5pdHMtcGVyLWVtPSI1MTIiIGFzY2VudD0iNDYxIiBkZXNjZW50PSItNTEiIC8 + CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSI1MTIiIC8 + CjxnbHlwaCB1bmljb2RlPSImI3gyMTsiIGQ9Ik0gNTA3LjQ0LTIuMjQ4YyA2LjA5Ni02LjA5NiwgNi4wOTYtMTUuOTg0LDAuMDAtMjIuMDk2bC0yMi4wOTYtMjIuMDk2CgljLTYuMTEyLTYuMDk2LTE2LjAwLTYuMDk2LTIyLjA5NiwwLjAwbC0xNTQuNjg4LDE1NC42ODhjLTEuNjgsMS42OC0yLjgwLDMuNjY0LTMuNTUyLDUuNzc2QyAyNzMuMjgsOTAuODQsIDIzNC4zMiw3Ny4wMCwgMTkyLjAwLDc3LjAwCglDIDg1Ljk2OCw3Ny4wMCwwLjAwLDE2Mi45NjgsMC4wMCwyNjkuMDBDMC4wMCwzNzUuMDMyLCA4NS45NjgsNDYxLjAwLCAxOTIuMDAsNDYxLjAwYyAxMDYuMDMy LDAuMDAsIDE5Mi4wMC04NS45NjgsIDE5Mi4wMC0xOTIuMDBjMC4wMC00Mi4zMi0xMy44NC04MS4yOC0zNy4wMjQtMTEzLjAwOAoJYyAyLjExMi0wLjc1MiwgNC4wOTYtMS44NTYsIDUuNzc2LTMuNTUyTCA1MDcuNDQtMi4yNDh6IE0gMTkyLjAwLDM5Ny4wMGMtNzAuNjg4LDAuMDAtMTI4LjAwLTU3LjMxMi0xMjguMDAtMTI4LjAwYzAuMDAtNzAuNjg4LCA1Ny4zMTItMTI4LjAwLCAxMjguMDAtMTI4LjAwcyAxMjguMDAsNTcuMzEyLCAxMjguMDAsMTI4LjAwCglDIDMyMC4wMCwzMzkuNjg4LCAyNjIuNjg4LDM5Ny4wMCwgMTkyLjAwLDM5Ny4wMHoiIC8 + CjxnbHlwaCB1bmljb2RlPSImI3gyMjsiIGQ9Ik0gMjU2LjAwLDEzLjQ5NmMtMTAuMzg0LDAuMDAtMjUuNTg0LDExLjY4LTM1LjY2NCwxMi43NTJjLTI4Ljc1Mi0yNC4xMTItNTguNzA0LTUzLjEzNi05OS40MjQtNjguMjI0CgljLTE3Ljc3Ni03LjUzNi0zMy4wNC0xMS45MDQtMzcuMDA4LTcuMTUyYy01LjMyOCw2LjE5Mi0xMy4zNzYsMTQuNzg0LTE0LjgwLDE3LjA4OGMgMC4wOCwzLjQyNCwgNC4yMjQsMC43MiwgOC43MzYsNS41ODQKCWMgMjQuNTc2LDEwLjMzNiwgNDAuNDQ4LDM3LjAwOCwgNTEuMTIsNjkuNjE2QyA1MS45ODQsODEuNzM2LDAuMDAsMTU0LjEwNCwwLjAwLDIzNy4yMDhDMC4wMCwzNjAuNzQ0LCAxMTQuNjI0LDQ2MC45MDQsIDI1Ni4wMCw0NjAuOTA0cyAyNTYuMDAtMTAwLjE0NCwgMjU2LjAwLTIyMy42OTYKCVMgMzk3LjM3NiwxMy40OTYsIDI1Ni4wMCwx My40OTZ6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjM7IiBkPSJNIDM2OC4wMCw0MjkuMDBjLTM4LjQ2NCwwLjAwLTY5LjI5Ni0xMy44MDgtOTYuNDgtNDEuMDA4Yy0wLjAxNi0wLjAxNi0wLjAzMi0wLjAzMi0wLjA0OC0wLjA0OAoJbC0wLjAxNiwwLjAwTCAyNTYuMDAsMzY4LjQ3MkwgMjQwLjU0NCwzODYuNzZjLTAuMDE2LDAuMDE2LTAuMDMyLDAuMDMyLTAuMDQ4LDAuMDQ4TCAyNDAuNDgsMzg2LjgwOCBsMC4wMCwwLjAwQyAyMTMuMjgsNDE0LjAyNCwgMTgyLjQ2NCw0MjkuMDAsIDE0NC4wMCw0MjkuMDBTIDY5LjM3Niw0MTQuMDI0LCA0Mi4xNzYsMzg2LjgyNAoJQyAxNC45OTIsMzU5LjYyNCwwLjAwLDMyMy40NjQsMC4wMCwyODUuMDBjMC4wMC0zOC40MzIsIDE0Ljk2LTc0LjU5MiwgNDIuMTI4LTEwMS43NzZMIDIzMy4yOC05LjUyOEMgMjM5LjI4LTE1LjU5MiwgMjQ3LjQ3Mi0xOS4wMCwgMjU2LjAwLTE5LjAwcyAxNi43MiwzLjQwOCwgMjIuNzIsOS40NzIKCWwgMTkxLjEzNiwxOTIuNzUyQyA0OTcuMDI0LDIxMC40MDgsIDUxMi4wMCwyNDYuNTUyLCA1MTIuMDAsMjg1LjAwYzAuMDAsMzguNDY0LTE0Ljk5Miw3NC42MjQtNDIuMTc2LDEwMS44MjRDIDQ0Mi42MjQsNDE0LjAyNCwgNDA2LjQ2NCw0MjkuMDAsIDM2OC4wMCw0MjkuMDBMIDM2OC4wMCw0MjkuMDB6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjQ7IiBkPSJNIDI1Ni4wMCwzNjUuMDBDIDExNC42MDgsMzY1LjAwLDAuMDAsMjA1LjAwLDAuMDAsMjA1LjAwcyAx MTQuNjA4LTE2MC4wMCwgMjU2LjAwLTE2MC4wMHMgMjU2LjAwLDE2MC4wMCwgMjU2LjAwLDE2MC4wMFMgMzk3LjM5MiwzNjUuMDAsIDI1Ni4wMCwzNjUuMDB6IE0gMjU2LjAwLDEwOS4wMAoJCQljLTUzLjAwOCwwLjAwLTk2LjAwLDQyLjk5Mi05Ni4wMCw5Ni4wMHMgNDIuOTkyLDk2LjAwLCA5Ni4wMCw5Ni4wMHMgOTYuMDAtNDIuOTkyLCA5Ni4wMC05Ni4wMFMgMzA5LjAwOCwxMDkuMDAsIDI1Ni4wMCwxMDkuMDB6IE0gMjU2LjAwLDI2OS4wMGMtMzUuMzQ0LDAuMDAtNjQuMDAtMjguNjU2LTY0LjAwLTY0LjAwcyAyOC42NTYtNjQuMDAsIDY0LjAwLTY0LjAwcyA2NC4wMCwyOC42NTYsIDY0LjAwLDY0LjAwCgkJCVMgMjkxLjM0NCwyNjkuMDAsIDI1Ni4wMCwyNjkuMDB6IiAvPjwvZm9udD48L2RlZnM + PC9zdmc +) Format ( 'SVG'), URL (data: font / ttf; charset = UTF-8; Base64, AAEAAAANAIAAAwBQRkZUTWJ6KjIAAAbwAAAAHEdERUYANQAGAAAG0AAAACBPUy8yT9zb + QAAAVgAAABWY21hcARB + dYAAAHQAAABUmdhc3D // wADAAAGyAAAAAhnbHlmq9ef6AAAAzgAAAGoaGVhZPoP + 5cAAADcAAAANmhoZWED / f / + WAAABFAAAACRobXR4CqoAAAAAAbAAAAAgbG9jYQGQASoAAAMkAAAAEm1heHAATQApAAABOAAAACBuYW1lOPxXYAAABOAAAAGqcG9zdJ wTbMAAAaMAAAAOgABAAAAAQAAJNzn + l8PPPUACwIAAAAAAMx4XYAAAAAAzHhdgAAA / 80CAAHNAAAACAACAAAAAAAAAAEAAAHN / 80ALgIAAAD + AAIAAAEAAAAAAAAAAAAA AAAAAAAIAAEAAAAIACYAAwAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQMAAAAAAAAAAAABEAAAAAAAAAAAAAAAUGZFZABAACHwAAHN / 80ALgHNADOAAAABAAAAAAAAAgAAAAAAAAAAqgAAAgAAAAIAAAACAAAAAgAAAAAAAAAAAAADAAAAAwAAABwAAQAAAAAATAADAAEAAAAcAAQAMAAAAAgACAACAAAAAAAk8AD // wAAAAAAIfAA // 8AAP / iEAcAAQAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAwQFBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMgBkAIoAxgDUAAAAAgAA / 9EB / AHNABUAHQAABRYPAQYvASYnBiMiJjQ2MhYVFAcWFyYiBhQWMjY0AfsLCxYLC5oDATM + UHBwoHAlAwNsaktLaksCCwsWCwuaAwMlcKBwcFA + MwED9UtqS0tqAAAAAAEAAP / OAgABzQAeAAAlIiYjDgQHBicuAic0PgE3NjcuATU0NjIWFAYBAAYZBQIdCxgVDCAFAgcFAQIFAiESO0aW1JaWDQ0BGQkSCwQNBgIIBgEBAQICDTgeZz1dg4O5hAAAAAABAAD / 7QIAAa0AFgAAASIHIwcnMCMxJiMiBhQfARYy PwE2NCYBcDcpAQ8PASo2PFQqvwoaCr8qVAGtKRQTKlR4KsEJCcEqeFQAAAAAAwAAAC0CAAFtABUAHQAlAAAAIg4CDwEeBDI + Aj8BLgMGIiY0NjIWFCYiBhQWMjY0AShQUT0xDQwFETc4U1BRPTENDAURNzhTUDg4UDhFNiUlNiUBbSEvLxARBxU3KiMhLy8QEQcVNyrdOFA4OFBoJTYlJTYAAAAAAQAA / 80CAAHNAAIAABEBIQIA / gABzf4AAAAAAAAADACWAAEAAAAAAAEACgAWAAEAAAAAAAIABwAxAAEAAAAAAAMAJgCHAAEAAAAAAAQACgDEAAEAAAAAAAUACwDnAAEAAAAAAAYACgEJAAMAAQQJAAEAFAAAAAMAAQQJAAIADgAhAAMAAQQJAAMATAA5AAMAAQQJAAQAFACuAAMAAQQJAAUAFgDPAAMAAQQJAAYAFADzAGMAdQBzAHQAbwBtAEYAbwBuAHQAAGN1c3RvbUZvbnQAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAAYwB1AHMAdABvAG0ARgBvAG4AdAAgADoAIAAxADQALQA5AC0AMgAwADEAMgAARm9udEZvcmdlIDIuMCA6IGN1c3RvbUZvbnQgOiAxNC05LTIwMTIAAGMAdQBzAHQAbwBtAEYAbwBuAHQAAGN1c3RvbUZvbnQAAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAGMAdQBzAHQAbwBtAEYAbwBuAHQAAGN1c3RvbUZvbnQAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAQACAAQABQAGAAcBAgd1bmlGMDAwAAAAAAAB // 8AAgABAAAADgAAABgAAAAAAAIAAQADAAcAAQAEAAAAAgAAAAAAAQAAAADJiW8xAAAAAMx4XYAAAAAAzHhdgA == ) format ('truetype'); Schriftgewicht: normal; font-style: normal;Diese wenigen CSS-Zeilen haben jetzt Ihre benutzerdefinierte Symbolschriftart, die mit allen modernen Browsern verwendet werden kann. Wenn Sie den IE9-Kompatibilitätsmodus und ältere Versionen von IE unterstützen möchten, müssen Sie eine zusätzliche Regel hinzufügen (beachten Sie, dass dadurch zusätzliche Ressourcen abgerufen werden, jedoch nur, wenn der Benutzeragent sie anfordert.).
@ font-face font-family: 'customFont'; src: url ('… /fonts/customFont.eot'); src: url ('… /fonts/customFont.eot?#iefix') format ('embedded-opentype'); Schriftgewicht: normal; font-style: normal;Neugierig auf diese IE-Fixes? Paul Irish hat einen großartigen Blogbeitrag über eine bulletproof @ font-face-Syntax.
Nun, da unsere Regeln erstellt wurden, gibt es zwei Möglichkeiten, die benutzerdefinierte Schriftart in unser Design aufzunehmen. Beide verwenden Unicode-Berechtigungen, um auf das entsprechende Symbol zu verweisen. Das Tolle an der IcoMoon-App ist, dass das gesamte CSS bereits für uns erstellt wurde und bereit ist, in unser Haupt-Stylesheet kopiert zu werden, je nachdem, welchen Ansatz wir verwenden (oder beides)..
Verwenden Ihrer Symbolschriftart: Datensymbolansatz
Die erste Technik für die Verwendung Ihrer Icon-Schriftart ist der Data-Icon-Ansatz, der unsere Markierungen schön und sauber hält und Bildschirmleserfreundlich ist.
Angenommen, wir möchten ein Kommentarsymbol einfügen (in diesem Fall mit dem Unicode-Wert von
& # x22;) innerhalb eines Bereichs auf unserer Seite.Unser HTML:
Das relevante CSS (direkt aus dem heruntergeladenen IcoMoon-Stylesheet übernommen) lautet wie folgt (die Kommentare stammen von mir).
/ * A: Bevor ein Pseudoelement für ein HTML-Element mit dem Datensymbolattribut * / [data-icon]: erstellt wird, wird vor der / * Font-Familie der Name in unserer @ font-face-Regel * / font-family festgelegt : 'customFont'; / * Der Inhalt des Pseudoelements wird aus dem HTML-Daten-Symbol abgerufen (z. B. ") * / content: attr (Daten-Symbol); / * Zusätzliche Anweisungen für Bildschirmleseprogramme (nicht allgemein anerkannt) * / speak: none; / * Universal Schriftstil * / Schriftgewicht: Normal; -webkit-Schriftglättung: Antialias; span / * Spezifischer Schriftstil * / Schriftgröße: 2em; Farbe: # A2A2A2; Abstand: 2px 5px 2px 5px; Rand rechts: 5px;Dieser Ansatz ist zwar schön und rationalisiert und vermeidet zusätzliche Aufblähungen in der Markup-Funktion, ist jedoch möglicherweise nicht die beste Wahl für wartbaren Code. Wenn Ihr Speicher für Unicode-Zeichen nicht sowohl enzyklopädisch als auch fotografisch ist, enthält dieser Ansatz keine Informationen innerhalb des HTML-Codes, die Sie zu dem angezeigten Symbol führen.
Verwenden Ihrer Symbolschriftart: Zusätzlicher Klassenansatz
Als Alternative können Sie zusätzliche CSS-Klassen in Ihrem HTML-Code verwenden, um das Symbol anzuzeigen. Dies hat den Vorteil, dass semantische, beschreibende Informationen direkt in Ihre Markierung eingegeben werden, wodurch die Lesbarkeit Ihres Codes verbessert wird.
Um diesen Ansatz zu verwenden, fügen Sie in Ihrem HTML-Code ein Element mit einem Klassennamen hinzu, wie im IcoMoon-Stylesheet angegeben:
Unser CSS wird so aussehen (Kommentare gehören mir).
/ * Die Regel wird auf jedes HTML-Element mit der Klasse 'icon- * l angewendet und setzt ein Pseudoelement auf das Element * / [class ^ = "icon -"]: vorher, [class * = "icon- "]: Vor / * Schriftfamilie wird der Name in unserer @ font-face-Regel festgelegt * / font-family: 'custom'; font-style: normal; sprich: keine; Schriftgewicht: normal; -webkit-font-smoothing: antialiased; .icon-comment: before / * Der Inhalt für das Pseudo-Element wird in Escape-Unicode gesetzt (d. h. "wird zu / 22") * / content: "\ 22";Jetzt können Sie mit ein wenig mehr Styling einfach gut aussehende Icon-Schriftarten in Ihr nächstes Projekt integrieren - ohne Ihren Asset-Baum mit zusätzlichen Ressourcen zu belasten.
Fazit
Vielen Dank, dass Sie sich die Zeit genommen haben, einige Möglichkeiten zu erkunden, wie Sie Daten-URIs für Ihr nächstes Projekt optimal nutzen können.
Es ist wichtig zu wissen, dass dies keine Daten-URIs sind immer die beste Lösung. Während die Verwendung von CSS3-, SVG- und Icon-Fonts einige überzeugende Vorteile gegenüber der Verwendung von Bildern bietet (insbesondere im Bereich des responsiven Designs), sind die Vorteile der Kodierung Ihrer Bilder in base64 differenzierter. Wenn Sie sich überlegen, ob Sie Daten-URIs in Ihrem nächsten Projekt verwenden möchten oder nicht, sollten Sie die Ladezeiten abwägen und HTTP-Anforderungen mit Code-Wartbarkeit reduzieren. Berücksichtigen Sie einfach Daten-URIs als ein anderes Tool in Ihrer Toolbox!
Hat dir dieses Tutorial gefallen und es juckt es jetzt, diese Techniken praktischer zu verwenden? Halten Sie nach neuen Premium-Inhalten Ausschau, in denen wir Daten-URIs umfassend einsetzen werden, um ein leichtes Benutzeroberflächen-Design zu erstellen. Beobachte diesen Raum!
Wie haben Sie in Ihren Projekten Icon-Schriftarten und Daten-URIs verwendet? Abonnieren und einen Kommentar hinterlassen!
Zusätzliche Ressourcen
