Share
Låt oss se på att förbättra webbplatsens prestanda genom att minska antalet HTTP-förfrågningar det gör. Vi kommer att dra nytta av en teknik som kallas data URI-systemet; kodning av både bilder och teckensnitt i rena datasträngar som kan integreras direkt i din markup och stylesheets.
Miniatyr: Broccolidryiconsaniconsetitisfullof ... ikoner av Visual Idiot (vi använder dessa ikoner på en minut ...)
Eftersom Internetanslutningar blev snabbare och datorer kraftigare, brukade webbplatsprestanda vara en ofta förbisedd bästa praxis. Idag är det absolut nödvändigt att säkerställa att din webbplats fungerar bra, för att hålla både dina användare och sökmotorerna nöjda. speciellt när webbplatsen nås med hjälp av mobila data och underdrivna telefoner och andra enheter.
Vi har redan tittat på CSS Sprite Sheets: Bästa praxis, verktyg och användbara applikationer innan på Webdesigntuts +, vilket visar hur du kan förbättra prestanda genom att minska HTTP-förfrågningar och minska den totala bildfilstorleken. Men visste du att du kan representera en bild (faktiskt någon binär data) i din HTML eller CSS med bara en ASCII-textsträng?
Denna teknik är känd som Data URI-systemet, och är faktiskt inte nytt. Även om Data URI har varit flytande i mer än tio år har de bara blivit populärt ganska nyligen med omfattande webbläsarkompatibilitet och fokus på att förbättra webbplatsens prestanda.
Den främsta fördelen med att använda data-URI är prestandaförbättring. Alla resurser som används på din webbplats hämtas av din webbläsare med hjälp av en HTTP-begäran. Detta inkluderar allt från stylesheets, till JavaScript-filer, till bilder. Oavsett internetanslutningens hastighet begränsar nästan alla webbläsare det maximala antalet samtidiga HTTP-förfrågningar till två åt gången vilket effektivt leder till en flaskhals av data. Ju fler HTTP-förfrågningar som behöver göras, desto fattigare blir webbplatsens övergripande prestanda.
Kombinera bilddata i HTML eller CSS på webbplatsen tar omedelbart bort behovet av att webbläsaren hämtar ytterligare resurser. Även om råa Base64-kodade data generellt anses vara cirka 33% större än sin optimerade motsvarighet (till exempel en bild), efter gzipping och CSS-filoptimering är skillnaden i filstorlek generellt försumbar.
En Data URI är i huvudsak binär data kodad till ett Base64-format, tillsammans med ytterligare information för webbläsaren inklusive en MIME-typ, en charset och kodningsformatet (Base64).
Data URI (i sin enklaste form) ser så här ut:
data: [] [; charset =] [; base64],
För att använda en data-URI som en inline-HTML-bild ser formatet ut så här:
För att använda en data-URI som en upprepande bakgrundsbild i CSS, är formatet enligt följande:
Accentsconagua
kropp background-image: url ('data: image / png; base64,'); bakgrundsrepetition: repetera; Alternativt kan du kombinera bakgrundselementen med CSS-stenografi:
div.logo bakgrund: url ('data: image / png; base64,') no-repeat till vänster; marginal: 20px 10px 0 10px; Medan vi har använt bilder för att illustrera användningen av Data URI, kan nästan vilket som helst medium användas, inklusive multimediafiler, teckensnitt (som vi ser snart) och mycket mer.
OK, låt oss bli praktiska med ett par exempel. Låt oss ta följande bild (en repeterande kakel som jag laddade ner från Subtle Patterns), konvertera den till en Data URI och använd CSS för att skapa en upprepande bakgrund för en webbplats eller ett gränssnitt.
Även om Data URI kan se ganska skraj, är processen för att skapa en mycket enkel.
Först, gå över till webben Semantics Data URI Converter och ladda upp bilden genom att välja filens filplacering och klicka på verktyget 'Convert Image':
När du har bearbetat, om du bläddrar ner på sidan ser du hur bilden ser ut som base64 kodas:
Eftersom vi behöver en upprepande bakgrund till vårt projekt måste vi ändra CSS som vi fått av verktyget.
För en upprepad bakgrund, kopiera och klistra in följande CSS:
div.logo background-repeat: repeat; background-image: url (data: 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 = );
Låt oss ta ett ännu enklare exempel, konvertera följande bild till en Data URI och slå in den i vår markering som en inline-bild:
Följ bara stegen ovan för att konvertera bilden till en bas64kodad bild och kopiera HTML-markupen som genereras av verktyget (från panelen 'As An Image') och klistra in den direkt i HTML-uppställningen på samma sätt som du skulle för att infoga en vanlig inline-bild.
Den sista koden för det här exemplet ser ut så här:
Det finns inte riktigt några hårda och snabba regler om när du ska använda data-URI-enheter för att ersätta platstillgångar, men det finns ett antal nackdelar och särdrag att överväga när du väljer om du vill använda Data URI.
Kommer du ihåg mig att säga det några binär data kan användas i data URI-schemat? Nu när vi har tittat på base64 kodade bilder, låt oss nu titta på att vrida en ikon typsnitt till en data URI och implementera det i ett projekt.
Faktum är att data-URI är en perfekt match för ikonfonter, speciellt om du bara planerar att använda några symboler med en liten filstorlek.
Vi ska använda online-webben IcoMoon för att skapa en anpassad typsnitt, mata ut data URI och skapa den slutliga CSS-koden.
Gå först till IcoMoon-webbplatsen och klicka på länken "Starta App":
Därefter bläddra du antingen till typsnittssätten för att välja dina egna ikonfonter eller alternativt använda sökfältet längst upp till vänster på sidan för att hitta teckensnitt som matchar taggarna 'Kommentar', 'Hjärta', 'Ögon' och 'Sök'.
Jag har använt Broccolidry-teckensnittet från Visual Idiot i det här exemplet.
Fortsätt sedan till sidan för nedladdningssätt genom att klicka på "Font" -knappen längst ner på skärmen:
På sidan för nedladdningsinställningar ändrar du baslinjen till 10%, klickar på inställningsikonen för att få fram de avancerade alternativen och markerar kryssrutan "Base64 Encode & Embed in CSS". Klicka på ikonen "Spara" för att ladda ner din typsnitt.
När du har laddat ner och extraherat den anpassade teckensnittet kan du öppna filen "index.html" för att se ditt teckensnitt och deras unicode-parningar:
Nu när vi har skapat vår anpassade ikonfontserie, låt oss se hur vi kan använda den i ett projekt.
Öppna först stilarket som tillhandahålls i IcoMoon-hämtningen och leta efter följande CSS. Eftersom namnet på spelet handlar om att minska HTTP-förfrågningar kommer vi att kopiera och klistra in alla medföljande CSS i vårt eget huvudblad.
@ font-face font-family: 'customFont'; src: url (data: font / 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"); typsnitt: normal; typsnittstyp: normal;Dessa få rader av CSS kommer nu att ha din anpassade Icon Font redo att fungera på alla moderna webbläsare. Om du vill stödja IE9-kompatibilitetsläge och gamla versioner av IE måste du lägga till ytterligare en regel (notera att detta kommer att hämta ytterligare resurser, men endast när användaragenten begär dem).
@ font-face font-family: 'customFont'; src: url ('... /fonts/customFont.eot'); src: url ('... /fonts/customFont.eot?#iefix') format ('embedded-opentype'); typsnitt: normal; typsnittstyp: normal;Nyfiken om dessa IE-korrigeringar? Paul Irish har ett bra blogginlägg på en bulletproof @ font-face-syntax.
Nu när våra regler har skapats finns det två sätt att vi kan inkludera den anpassade teckensnittet i vår design, som båda använder Unicode rätt att hänvisa till den relevanta ikonen. Det fantastiska med IcoMoon-appen är att alla CSS redan har genererats för oss, redo att kopieras till vårt huvudsakliga stilark, beroende på vilken metod vi väljer att använda (eller båda).
Använda ikonens teckensnitt: Data Icon Approach
Den första tekniken för att använda ditt ikonfonfigur är datanymbolens tillvägagångssätt som håller vår markering snygg och ren och är skärmsläsarevänlig.
Låt oss säga att vi vill inkludera en kommentarikon (i detta fall med unicode-värdet på
& # X22;) inuti ett spännelement på vår sida.Vår HTML:
Den relevanta CSS (tas direkt från det nedladdade IcoMoon-stilarket) är som följer (kommentarer är mina).
/ * A: innan pseudoelement skapas för något HTML-element med attributet data-ikon * / [data-ikon]: före / * Fontfamiljen ställs in i vårt @ font-face-regel * / fontfamilj : 'customFont'; / * Innehållet för pseudoelementet hämtas från HTML-data-ikonen (t.ex. ") * / innehåll: attr (data-ikon); / * Ytterligare instruktioner till skärmsläsare (inte universellt erkända) * / tala: none; / * Univeral font styling * / font-weight: normal; -webkit-font-utjämning: antialiased; span / * Specifik typsnittstil * / typsnittstorlek: 2em; färg: # A2A2A2; vaddering: 2px 5px 2px 5px; marginal-höger: 5px;Även om detta tillvägagångssätt är trevligt och strömlinjeformat och undviker ytterligare klassflöde i din uppställning, kanske det inte är det bästa valet för underhållsbar kod. Om inte ditt minne om Unicode-tecken är både encyklopediskt och fotografiskt, innehåller inte detta tillvägagångssätt någon information i den HTML som tipsar dig på vilken ikon som ska visas.
Använda ikonens teckensnitt: Ytterligare klassmetod
Som ett alternativt tillvägagångssätt kan du välja att använda ytterligare CSS-klasser i din HTML för att visa ikonen. Detta har fördelen att inmatning av semantisk, beskrivande information direkt i din markering, vilket förbättrar läsbarheten av din kod.
För att använda detta tillvägagångssätt, lägg till ett element i din HTML med ett klassnamn enligt IcoMoon-stilarket:
Vår CSS kommer att se ut så här (kommentarer är mina).
/ * Regeln kommer att tillämpas på något HTML-element med en klass av 'ikon- * l och sätter ett pseudoelement till elementet * / [class ^ = "ikon -"]: före [class * = "icon- "]: före / * Fontfamiljen ställs in i vår @ font-face-regel * / font-family:" custom "; typsnittstyp: normal; tala: ingen; typsnitt: normal; -webkit-typsnitt-utjämning: antialiased; .ikon-kommentar: före / * Innehållet för pseudoelementet anges i undviket unicode (dvs "blir" / 22 ") * / innehåll:" \ 22 ";Nu, med en liten extra styling, kan du enkelt implementera snygga ikonfonter i ditt nästa projekt - utan att bogsera ditt tillgångsträd med ytterligare resurser.
Slutsats
Tack för att du har tagit dig tid att utforska några av de sätt som du kan få ut så mycket som möjligt av Data URI för ditt nästa projekt.
Det är viktigt att komma ihåg att Data URI inte är alltid den bästa lösningen. Medan användningen av CSS3, SVG och Icon Fonts har några mycket övertygande fördelar framför användningen av bilder (särskilt inom ramen för responsiv design), nyanseras fördelarna med att koda dina bilder i base64. När du överväger om du vill använda data-URI i ditt nästa projekt, väger du uppladdningstider och minskar HTTP-förfrågningar med kodunderhållbarhet. Tänk bara på data-URI-enheter som ett annat verktyg i verktygslådan!
Njut du av denna handledning och kliar nu för att komma igång med att använda dessa tekniker på ett mer praktiskt sätt? Håll ögonen på nytt premiuminnehåll där vi ska använda data-URI-data i stor utsträckning för att skapa en lätt användargränssnitt. Övervaka den här ytan!
Hur har du använt ikon typsnitt och data URI i dina projekt? Prenumerera och lämna en kommentar!
Ytterligare resurser
