Share
Laten we eens kijken naar het verbeteren van de prestaties van uw site door het aantal HTTP-aanvragen te verminderen. We gaan profiteren van een techniek die bekend staat als het data-URI-schema; codering van zowel afbeeldingen als lettertypen in pure datastrings die direct in uw markup en stijlbladen kunnen worden geïntegreerd.
thumbnail: De Broccolidryiconsaniconsetitisvol van pictogrammen van Visual Idiot (we gebruiken deze pictogrammen in een minuut ...)
Naarmate internetverbindingen sneller werden en computers krachtiger, waren websiteprestaties een vaak over het hoofd gezien best practice. Vandaag de dag is het absoluut noodzakelijk om ervoor te zorgen dat uw website goed presteert om zowel uw gebruikers als de zoekmachines tevreden te houden; vooral wanneer de site wordt geopend met behulp van mobiele gegevens en telefoons met een te laag vermogen en andere apparaten.
We hebben al eerder gekeken naar CSS Sprite Sheets: Best Practices, Tools and Useful Applications op Webdesigntuts +, waarin wordt aangetoond hoe u de prestaties kunt verbeteren door HTTP-verzoeken te verminderen en de algehele beeldbestandsgrootte te verminderen. Maar wist u dat u een afbeelding (eigenlijk elke binaire gegevens) in uw HTML of CSS kunt weergeven met alleen een ASCII-tekststring?
Deze techniek staat bekend als het Data URI-schema en is in feite niet nieuw. Hoewel Data URI's al meer dan tien jaar rondzwerven, zijn ze pas sinds kort populairder geworden met wijdverbreide browsercompatibiliteit en een focus op het verbeteren van de prestaties van de site.
Het primaire voordeel van het gebruik van gegevens-URI's is prestatieverbetering. Alle bronnen die op uw site worden gebruikt, worden door uw browser opgehaald met behulp van een HTTP-verzoek. Dit omvat alles, van stylesheets, tot JavaScript-bestanden, tot afbeeldingen. Ongeacht de snelheid van de internetverbinding beperken bijna alle browsers het maximale aantal gelijktijdige HTTP-aanvragen tot twee tegelijk, wat feitelijk resulteert in een knelpunt van gegevens. Hoe meer HTTP-verzoeken moeten worden gemaakt, hoe slechter de algehele prestaties van de site zijn.
Door afbeeldingsgegevens te combineren in de HTML of CSS van de site, wordt de noodzaak voor de browser om extra bronnen op te halen direct verwijderd. Hoewel ruwe Base64 gecodeerde gegevens over het algemeen als ongeveer 33% groter worden beschouwd dan de geoptimaliseerde tegenhanger (bijvoorbeeld een afbeelding), is na gzipping en CSS-bestandsoptimalisatie het verschil in bestandsgrootte over het algemeen te verwaarlozen.
Een gegevens-URI bestaat hoofdzakelijk uit binaire gegevens die zijn gecodeerd in een Base64-indeling, samen met wat aanvullende informatie voor de browser, waaronder een MIME-type, een Charset en het coderingsformaat (Base64).
De gegevens-URI (in de eenvoudigste vorm) ziet er als volgt uit:
gegevens: [] [; charset =] [; base64],
Als u een gegevens-URI wilt gebruiken als inline HTML-afbeelding, ziet het formaat er als volgt uit:
Om een gegevens-URI te gebruiken als een zich herhalende achtergrondafbeelding in CSS, is het formaat als volgt:
Accentsconagua
body background-image: url ('data: image / png; base64,'); achtergrondherhaling: herhalen; Als alternatief, combineer de achtergrondelementen met CSS-stenografie:
div.logo background: url ('data: image / png; base64,') no-repeat links bovenaan; marge: 20px 10px 0 10px; Hoewel we afbeeldingen hebben gebruikt om het gebruik van Data URI's te illustreren, kan vrijwel elk medium worden gebruikt, inclusief multimediabestanden, lettertypen (zoals we binnenkort zullen zien) en nog veel meer.
OK, laten we praktisch worden met een paar voorbeelden. Laten we de volgende afbeelding nemen (een herhalende tegel die ik heb gedownload van Subtle Patterns), deze omzetten in een gegevens-URI en CSS gebruiken om een herhalende achtergrond voor een site of interface te maken.
Hoewel Data URI's er behoorlijk funky uitzien, is het proces om er een te maken heel eenvoudig.
Ga eerst naar de Web Semantics Data URI Converter en upload de afbeelding door de bestandslocatie van de afbeelding te selecteren en op de tool 'Afbeelding converteren' te klikken:
Als u, na het verwerken van de pagina, naar beneden scrolt, ziet u hoe deze afbeelding eruitziet als gecodeerd met base64:
Omdat we een herhalende achtergrond nodig hebben voor ons project, moeten we de CSS aanpassen die ons door de tool is gegeven.
Voor een herhalende achtergrond kopieert en plakt u de volgende CSS:
div.logo background-repeat: repeat; background-image: url (data: image / jpeg, base64, / 9 J / 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 = );
Laten we een nog eenvoudiger voorbeeld nemen door de volgende afbeelding naar een gegevens-URI te converteren en deze in onze opmaak in te voegen als een inline-afbeelding:
Volg de bovenstaande stappen om de afbeelding te converteren naar een base64-gecodeerde afbeelding en kopieer de HTML-markering die door de tool wordt gegenereerd (uit het paneel 'Als een afbeelding') en plak deze rechtstreeks in uw HTML-markup op dezelfde manier als voor invoegen een normaal inline-beeld.
De definitieve code voor dit voorbeeld ziet er als volgt uit:
Er zijn niet echt harde en snelle regels over wanneer u gegevens-URI's moet gebruiken om siteactiva te vervangen, maar er zijn een aantal nadelen en eigenaardigheden waarmee u rekening moet houden bij het kiezen van het gebruik van gegevens-URI's..
Herinner je je dat ik dat zei ieder binaire gegevens kunnen worden gebruikt in het gegevens-URI-schema? Nu we hebben gekeken naar de base64-gecodeerde afbeeldingen, laten we nu eens kijken naar het omzetten van een pictogramlettertype naar een gegevens-URI en deze implementeren in een project.
Data URI's zijn namelijk een perfecte match voor pictogramlettertypen, vooral als je van plan bent om een paar symbolen te gebruiken met een klein bestandsformaat.
We gaan de online webapp IcoMoon gebruiken om een aangepaste lettertypeset te genereren, de gegevens-URI uit te voeren en de uiteindelijke CSS-code te genereren.
Ga eerst naar de IcoMoon-site en klik op de link 'Start Using The App':
Blader vervolgens door de lettertypesets om uw aangepaste pictogramlettertypen te selecteren of gebruik het zoekveld links bovenaan de pagina om lettertypen te zoeken die overeenkomen met de tags 'Reactie', 'Hart', 'Oog' en 'Zoeken'..
Ik heb de Broccolidry-lettertypenset van Visual Idiot in dit voorbeeld gebruikt.
Ga vervolgens naar de pagina met downloadinstellingen door op de knop 'Lettertype' onder aan het scherm te klikken:
Op de pagina met downloadinstellingen wijzigt u de basislijn in 10%, klikt u op het instellingenpictogram om de geavanceerde opties weer te geven en schakelt u het selectievakje 'Base64 Encode & insluiten in CSS' in. Klik op het pictogram 'Opslaan' om uw lettertype te downloaden.
Nadat u het aangepaste lettertype hebt gedownload en uitgepakt, kunt u het bestand 'index.html' openen om uw lettertype en de bijbehorende unicode-koppelingen te bekijken:
Nu we onze aangepaste pictogramlettertype set hebben gemaakt, laten we zien hoe we het in een project kunnen gebruiken.
Open eerst het stijlblad in de IcoMoon-download en zoek de volgende CSS. Omdat de naam van het spel over het verminderen van HTTP-verzoeken gaat, kopiëren en plakken we alle geleverde CSS in onze eigen hoofdstijlpagina.
@ font-face font-family: 'customFont'; src: url (gegevens: font / svg; charset = UTF-8, base64, PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI / Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE ClRoaXMgaXMgYSBjdXN0b20gU1ZHIGZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uCjEKPC9tZXRhZGF0YT4KPGRlZnM + + + Cjxmb250IGlkPSJjdXN0b21Gb250IiBob3Jpei1hZHYteD0iNTEyIiA Cjxmb250LWZhY2UgdW5pdHMtcGVyLWVtPSI1MTIiIGFzY2VudD0iNDYxIiBkZXNjZW50PSItNTEiIC8 + + CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSI1MTIiIC8 CjxnbHlwaCB1bmljb2RlPSImI3gyMTsiIGQ9Ik0gNTA3LjQ0LTIuMjQ4YyA2LjA5Ni02LjA5NiwgNi4wOTYtMTUuOTg0LDAuMDAtMjIuMDk2bC0yMi4wOTYtMjIuMDk2CgljLTYuMTEyLTYuMDk2LTE2LjAwLTYuMDk2LTIyLjA5NiwwLjAwbC0xNTQuNjg4LDE1NC42ODhjLTEuNjgsMS42OC0yLjgwLDMuNjY0LTMuNTUyLDUuNzc2QyAyNzMuMjgsOTAuODQsIDIzNC4zMiw3Ny4wMCwgMTkyLjAwLDc3LjAwCglDIDg1Ljk2OCw3Ny4wMCwwLjAwLDE2Mi45NjgsMC4wMCwyNjkuMDBDMC4wMCwzNzUuMDMyLCA4NS45NjgsNDYxLjAwLCAxOTIuMDAsNDYxLjAwYyAxMDYuMDMy LDAuMDAsIDE5Mi4wMC04NS45NjgsIDE5Mi4wMC0xOTIuMDBjMC4wMC00Mi4zMi0xMy44NC04MS4yOC0zNy4wMjQtMTEzLjAwOAoJYyAyLjExMi0wLjc1MiwgNC4wOTYtMS44NTYsIDUuNzc2LTMuNTUyTCA1MDcuNDQtMi4yNDh6IE0gMTkyLjAwLDM5Ny4wMGMtNzAuNjg4LDAuMDAtMTI4LjAwLTU3LjMxMi0xMjguMDAtMTI4LjAwYzAuMDAtNzAuNjg4LCA1Ny4zMTItMTI4LjAwLCAxMjguMDAtMTI4LjAwcyAxMjguMDAsNTcuMzEyLCAxMjguMDAsMTI4LjAwCglDIDMyMC4wMCwzMzkuNjg4LCAyNjIuNjg4LDM5Ny4wMCwgMTkyLjAwLDM5Ny4wMHoiIC8 + CjxnbHlwaCB1bmljb2RlPSImI3gyMjsiIGQ9Ik0gMjU2LjAwLDEzLjQ5NmMtMTAuMzg0LDAuMDAtMjUuNTg0LDExLjY4LTM1LjY2NCwxMi43NTJjLTI4Ljc1Mi0yNC4xMTItNTguNzA0LTUzLjEzNi05OS40MjQtNjguMjI0CgljLTE3Ljc3Ni03LjUzNi0zMy4wNC0xMS45MDQtMzcuMDA4LTcuMTUyYy01LjMyOCw2LjE5Mi0xMy4zNzYsMTQuNzg0LTE0LjgwLDE3LjA4OGMgMC4wOCwzLjQyNCwgNC4yMjQsMC43MiwgOC43MzYsNS41ODQKCWMgMjQuNTc2LDEwLjMzNiwgNDAuNDQ4LDM3LjAwOCwgNTEuMTIsNjkuNjE2QyA1MS45ODQsODEuNzM2LDAuMDAsMTU0LjEwNCwwLjAwLDIzNy4yMDhDMC4wMCwzNjAuNzQ0LCAxMTQuNjI0LDQ2MC45MDQsIDI1Ni4wMCw0NjAuOTA0cyAyNTYuMDAtMTAwLjE0NCwgMjU2LjAwLTIyMy42OTYKCVMgMzk3LjM3NiwxMy40OTYsIDI1Ni4wMCwx My40OTZ6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjM7IiBkPSJNIDM2OC4wMCw0MjkuMDBjLTM4LjQ2NCwwLjAwLTY5LjI5Ni0xMy44MDgtOTYuNDgtNDEuMDA4Yy0wLjAxNi0wLjAxNi0wLjAzMi0wLjAzMi0wLjA0OC0wLjA0OAoJbC0wLjAxNiwwLjAwTCAyNTYuMDAsMzY4LjQ3MkwgMjQwLjU0NCwzODYuNzZjLTAuMDE2LDAuMDE2LTAuMDMyLDAuMDMyLTAuMDQ4LDAuMDQ4TCAyNDAuNDgsMzg2LjgwOCBsMC4wMCwwLjAwQyAyMTMuMjgsNDE0LjAyNCwgMTgyLjQ2NCw0MjkuMDAsIDE0NC4wMCw0MjkuMDBTIDY5LjM3Niw0MTQuMDI0LCA0Mi4xNzYsMzg2LjgyNAoJQyAxNC45OTIsMzU5LjYyNCwwLjAwLDMyMy40NjQsMC4wMCwyODUuMDBjMC4wMC0zOC40MzIsIDE0Ljk2LTc0LjU5MiwgNDIuMTI4LTEwMS43NzZMIDIzMy4yOC05LjUyOEMgMjM5LjI4LTE1LjU5MiwgMjQ3LjQ3Mi0xOS4wMCwgMjU2LjAwLTE5LjAwcyAxNi43MiwzLjQwOCwgMjIuNzIsOS40NzIKCWwgMTkxLjEzNiwxOTIuNzUyQyA0OTcuMDI0LDIxMC40MDgsIDUxMi4wMCwyNDYuNTUyLCA1MTIuMDAsMjg1LjAwYzAuMDAsMzguNDY0LTE0Ljk5Miw3NC42MjQtNDIuMTc2LDEwMS44MjRDIDQ0Mi42MjQsNDE0LjAyNCwgNDA2LjQ2NCw0MjkuMDAsIDM2OC4wMCw0MjkuMDBMIDM2OC4wMCw0MjkuMDB6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjQ7IiBkPSJNIDI1Ni4wMCwzNjUuMDBDIDExNC42MDgsMzY1LjAwLDAuMDAsMjA1LjAwLDAuMDAsMjA1LjAwcyAx MTQuNjA4LTE2MC4wMCwgMjU2LjAwLTE2MC4wMHMgMjU2LjAwLDE2MC4wMCwgMjU2LjAwLDE2MC4wMFMgMzk3LjM5MiwzNjUuMDAsIDI1Ni4wMCwzNjUuMDB6IE0gMjU2LjAwLDEwOS4wMAoJCQljLTUzLjAwOCwwLjAwLTk2LjAwLDQyLjk5Mi05Ni4wMCw5Ni4wMHMgNDIuOTkyLDk2LjAwLCA5Ni4wMCw5Ni4wMHMgOTYuMDAtNDIuOTkyLCA5Ni4wMC05Ni4wMFMgMzA5LjAwOCwxMDkuMDAsIDI1Ni4wMCwxMDkuMDB6IE0gMjU2LjAwLDI2OS4wMGMtMzUuMzQ0LDAuMDAtNjQuMDAtMjguNjU2LTY0LjAwLTY0LjAwcyAyOC42NTYtNjQuMDAsIDY0LjAwLTY0LjAwcyA2NC4wMCwyOC42NTYsIDY0LjAwLDY0LjAwCgkJCVMgMjkxLjM0NCwyNjkuMDAsIDI1Ni4wMCwyNjkuMDB6IiAvPjwvZm9udD48L2RlZnM + PC9zdmc +) formaat (SVG), URL (gegevens: 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 == ) formaat ('truetype'); font-gewicht: normaal; lettertype: normaal;Deze paar regels CSS hebben nu uw eigen pictogramlettertype gereed om op alle moderne browsers te werken. Als u IE9-compatibiliteitsmodus en oude versies van IE wilt ondersteunen, moet u een extra regel toevoegen (merk op dat dit extra bronnen zal ophalen, maar alleen wanneer de Gebruikersagent dit vraagt).
@ font-face font-family: 'customFont'; src: url ('... /fonts/customFont.eot'); src: url ('... /fonts/customFont.eot?#iefix') formaat ('embedded-opentype'); font-gewicht: normaal; lettertype: normaal;Benieuwd naar deze IE-oplossingen? Paul Irish heeft een geweldige blogpost over een bulletproof @ font-face-syntax.
Nu onze regels zijn gemaakt, zijn er twee manieren waarop we het aangepaste lettertype in ons ontwerp kunnen opnemen. Beide gebruiken Unicode-rechten om naar het relevante pictogram te verwijzen. Het mooie van de IcoMoon-app is dat alle CSS al voor ons is gegenereerd, klaar om te worden gekopieerd naar onze belangrijkste stylesheet, afhankelijk van de benadering die we besluiten te gebruiken (of beide).
Uw pictogramlettertype gebruiken: Data Icon Approach
De eerste techniek om uw pictogramlettertype te gebruiken, is de datapictogrambenadering, die onze markeringen mooi en schoon houdt en schermleesvriendelijk is.
Laten we zeggen dat we een commentaarpictogram willen toevoegen (in dit geval met de unicode-waarde van
& # X22;) binnen een spanelement op onze pagina.Onze HTML:
De relevante CSS (rechtstreeks overgenomen uit de gedownloade IcoMoon-stylesheet) is als volgt (opmerkingen zijn van mij).
/ * A: voordat pseudo-element is gemaakt voor elk HTML-element met het kenmerk gegevenspictogram * / [data-pictogram]: voordat / * lettertypefamilie is ingesteld, wordt de naam ingesteld in onze regel @ font-face * / font-family : 'customFont'; / * De inhoud van het pseudo-element wordt opgehaald uit het HTML-gegevenspictogram (bijv. ") * / Inhoud: attr (data-icoon); / * Aanvullende instructies voor schermlezers (niet universeel erkend) * / speak: none; / * Universele lettertype-styling * / lettertype-gewicht: normaal; -webkit-font-smoothing: antialiased; span / * Specific font-styling * / font-size: 2em; kleur: # A2A2A2; opvulling: 2px 5px 2px 5px; margin-right: 5px;Hoewel deze aanpak leuk en gestroomlijnd is en extra klassezweten in uw markup voorkomt, is het misschien niet de beste keuze voor onderhoudbare code. Tenzij uw geheugen van Unicode-tekens zowel encyclopedisch als fotografisch is, bevat deze aanpak geen enkele informatie in de HTML die u wegwijs maakt naar welk pictogram wordt weergegeven.
Uw pictogramlettertype gebruiken: aanvullende klassenaanpak
Als alternatieve benadering kunt u ervoor kiezen om aanvullende CSS-klassen in uw HTML te gebruiken om het pictogram weer te geven. Dit heeft het voordeel dat semantische, beschrijvende informatie rechtstreeks in uw markup wordt ingevoerd, waardoor de leesbaarheid van uw code wordt verbeterd.
Om deze aanpak te gebruiken, voegt u een element in uw HTML toe met een klassenaam zoals voorzien door het IcoMoon-stylesheet:
Onze CSS zal er zo uitzien (opmerkingen zijn van mij).
/ * De regel wordt toegepast op elk HTML-element met een klasse van 'icon- * l en stelt een pseudo-element in op het element * / [class ^ = "icon -"]: before, [class * = "icon- "]: voordat / * Fontfamilie is ingesteld, wordt de naam ingesteld in onze regel @ font-face * / font-family: 'custom'; lettertype: normaal; spreek: geen; font-gewicht: normaal; -webkit-font-smoothing: antialiased; .icon-comment: before / * De inhoud voor het pseudo-element wordt ingesteld in escaped unicode (i.e. "wordt '/ 22') * / content:" \ 22 ";Nu, met een beetje extra styling, kunt u eenvoudig fantastisch uitziende pictogramlettertypen implementeren in uw volgende project - zonder uw activaboom te verzanden met extra bronnen.
Conclusie
Hartelijk dank dat u de tijd hebt genomen om enkele manieren te verkennen waarop u het maximale uit Data URI's voor uw volgende project kunt halen.
Het is belangrijk om te onthouden dat Data URI's dat niet zijn altijd de beste oplossing. Hoewel het gebruik van CSS3, SVG en Icon Fonts enkele zeer aantrekkelijke voordelen heeft ten opzichte van het gebruik van afbeeldingen (met name op het gebied van responsief ontwerp), zijn de voordelen van het coderen van uw afbeeldingen in base64 genuanceerder. Wanneer u overweegt om gegevens-URI's in uw volgende project al dan niet te gebruiken, weeg laadtijden en verlaagde HTTP-aanvragen met code-onderhoud - beschouw Data URI's als een ander hulpmiddel in uw toolbox!
Vond je deze tutorial leuk en probeer je nu op een meer praktische manier aan de slag te gaan met deze technieken? Houd binnenkort nieuwe premium-inhoud in de gaten waar we de gegevens-URI's uitgebreid zullen gebruiken om een lichtgewicht gebruikersinterfaceontwerp te maken. Bekijk deze ruimte!
Hoe hebt u pictogramlettertypen en gegevens-URI's gebruikt in uw projecten? Abonneer je en laat een reactie achter!
Aanvullende bronnen
