Share
Diamo un'occhiata al miglioramento delle prestazioni del tuo sito riducendo il numero di richieste HTTP che fa. Stiamo per trarre vantaggio da una tecnica nota come lo schema URI di dati; codifica sia di immagini che di caratteri in stringhe di dati puri che possono essere integrate direttamente nel markup e nei fogli di stile.
Miniatura: Il Broccolidryiconsaniconsetitisfullof ... icone di Visual Idiot (useremo queste icone in un minuto ...)
Con l'aumentare delle connessioni Internet e l'aumento dei computer, le prestazioni del sito Web erano spesso considerate una best practice trascurata. Oggi, garantire che il tuo sito web stia funzionando bene è assolutamente vitale per mantenere felici sia gli utenti che i motori di ricerca; specialmente quando si accede al sito utilizzando dati mobili e telefoni non funzionanti e altri dispositivi.
Abbiamo già esaminato CSS Sprite Sheets: best practice, strumenti e applicazioni utili in precedenza su Webdesigntuts +, dimostrando come è possibile migliorare le prestazioni riducendo le richieste HTTP e riducendo le dimensioni complessive del file di immagine. Ma sapevi che puoi rappresentare un'immagine (in realtà qualsiasi dato binario) nel tuo HTML o CSS usando solo una stringa di testo ASCII?
Questa tecnica è conosciuta come lo schema URI di dati, e in effetti non è nuova. Sebbene gli URI dei dati abbiano oscillato per più di dieci anni, hanno guadagnato popolarità solo recentemente grazie alla diffusa compatibilità con i browser e al focus sul miglioramento delle prestazioni del sito.
Il vantaggio principale dell'utilizzo di URI di dati è il miglioramento delle prestazioni. Qualsiasi risorsa utilizzata nel tuo sito viene recuperata dal tuo browser utilizzando una richiesta HTTP. Ciò include tutto, dai fogli di stile, ai file JavaScript, alle immagini. Indipendentemente dalla velocità della connessione Internet, quasi tutti i browser limitano la quantità massima di richieste HTTP simultanee a due alla volta, provocando di fatto un collo di bottiglia di dati. Più richieste HTTP devono essere fatte, più scarsa sarà la prestazione complessiva del sito.
La combinazione dei dati di immagine nell'HTML o CSS del sito rimuove istantaneamente la necessità che il browser recuperi risorse aggiuntive. Sebbene i dati codificati Base64 grezzi siano generalmente considerati più grandi del 33% rispetto alla controparte ottimizzata (ad esempio un'immagine), dopo l'ottimizzazione di gzip e di file CSS, la differenza nella dimensione del file è generalmente trascurabile.
Un URI di dati è essenzialmente dati binari codificati in un formato Base64, insieme ad alcune informazioni aggiuntive per il browser che includono un tipo MIME, un set di caratteri e il formato di codifica (Base64).
L'URI di dati (nella sua forma più semplice) assomiglia a questo:
Dati: [] [; charset =] [; base64],
Per utilizzare un URI di dati come immagine HTML incorporata, il formato è simile al seguente:
Per utilizzare un URI di dati come immagine di sfondo ripetuta nei CSS, il formato è il seguente:
Accentsconagua
body background-image: url ('data: image / png; base64,'); background-repeat: repeat; In alternativa, combina gli elementi di sfondo con la stenografia CSS:
div.logo background: url ('data: image / png; base64,') no-repeat in alto a sinistra; margine: 20px 10px 0 10px; Mentre abbiamo utilizzato le immagini per illustrare l'uso degli URI dei dati, è possibile utilizzare praticamente qualsiasi supporto, inclusi file multimediali, tipi di carattere (come vedremo tra poco) e molto altro.
OK, mettiamoci in pratica con un paio di esempi. Prendiamo la seguente immagine (una tessera ripetitiva che ho scaricato da Subtle Patterns), la convertiamo in un URI dei dati e utilizziamo i CSS per creare uno sfondo ripetuto per un sito o un'interfaccia.
Sebbene gli URI dei dati possano sembrare piuttosto funky, il processo per crearne uno è molto semplice.
Per prima cosa, vai al convertitore URI di dati semantici Web e carica l'immagine selezionando la posizione del file dell'immagine e facendo clic sullo strumento "Converti immagine":
Una volta elaborato, se scorri verso il basso nella pagina, vedrai come appare questa immagine come codificata Base64:
Dal momento che abbiamo bisogno di uno sfondo ripetitivo per il nostro progetto, dovremo modificare il CSS fornito dallo strumento.
Per uno sfondo ripetuto, copia e incolla il seguente CSS:
div.logo background-repeat: repeat; background-image: url (dati: 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 = );
Facciamo un esempio ancora più semplice, convertendo la seguente immagine in un URI di dati e inserendola nel nostro markup come immagine in linea:
Segui semplicemente i passaggi sopra riportati per convertire l'immagine in un'immagine codificata in Base64 e copia il codice HTML generato dallo strumento (dal pannello 'Come immagine') e incollalo direttamente nel tuo markup HTML nello stesso modo in cui inseriresti un'immagine in linea regolare.
Il codice finale per questo esempio ha il seguente aspetto:
Non ci sono regole rigide su quando utilizzare gli URI dei dati per sostituire le risorse del sito, ma ci sono una serie di inconvenienti e peculiarità da considerare quando si sceglie di utilizzare o meno gli URI dei dati.
Ti ricordi che me lo dicevo qualunque i dati binari possono essere utilizzati nello schema URI di dati? Ora che abbiamo esaminato le immagini codificate in base 64, diamo ora un'occhiata al trasformare un font di icona in un URI di dati e implementarlo in un progetto.
Infatti, gli URI dei dati sono perfettamente compatibili con i font di icone, specialmente se si prevede di utilizzare solo alcuni simboli con una dimensione ridotta.
Utilizzeremo l'app Web online IcoMoon per generare un set di caratteri personalizzato, generare l'URI dei dati e generare il codice CSS finale.
Per prima cosa, vai al sito IcoMoon e fai clic sul link "Inizia a utilizzare l'app":
Successivamente, sfoglia i set di caratteri per selezionare i caratteri personalizzati dell'icona o, in alternativa, utilizza il campo di ricerca in alto a sinistra nella pagina per trovare i caratteri che corrispondono ai tag "Commento", "Cuore", "Occhio" e "Cerca".
In questo esempio ho utilizzato il set di font Broccolidry da Visual Idiot.
Successivamente, vai alla pagina delle impostazioni di download facendo clic sul pulsante "Font" nella parte inferiore dello schermo:
Nella pagina delle impostazioni di download, modifica la previsione al 10%, fai clic sull'icona delle impostazioni per visualizzare le opzioni avanzate e seleziona la casella di controllo 'Base64 Encode & Incorpora in CSS'. Fare clic sull'icona 'Salva' per scaricare il font.
Dopo aver scaricato ed estratto il font personalizzato, puoi aprire il file 'index.html' per visualizzare il tuo font e le relative combinazioni Unicode:
Ora che abbiamo creato il set di caratteri per icone personalizzate, vediamo come possiamo utilizzarlo in un progetto.
Innanzitutto, apri il foglio di stile fornito nel download di IcoMoon e individua il seguente CSS. Dal momento che il nome del gioco riguarda la riduzione delle richieste HTTP, stiamo copiando e incollando tutti i CSS forniti nel nostro foglio di stile principale.
@ font-face font-family: 'customFont'; src: url (dati: font / svg; charset = utf-8; base64, PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI / Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE + ClRoaXMgaXMgYSBjdXN0b20gU1ZHIGZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uCjEKPC9tZXRhZGF0YT4KPGRlZnM + Cjxmb250IGlkPSJjdXN0b21Gb250IiBob3Jpei1hZHYteD0iNTEyIiA + Cjxmb250LWZhY2UgdW5pdHMtcGVyLWVtPSI1MTIiIGFzY2VudD0iNDYxIiBkZXNjZW50PSItNTEiIC8 + CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSI1MTIiIC8 + CjxnbHlwaCB1bmljb2RlPSImI3gyMTsiIGQ9Ik0gNTA3LjQ0LTIuMjQ4YyA2LjA5Ni02LjA5NiwgNi4wOTYtMTUuOTg0LDAuMDAtMjIuMDk2bC0yMi4wOTYtMjIuMDk2CgljLTYuMTEyLTYuMDk2LTE2LjAwLTYuMDk2LTIyLjA5NiwwLjAwbC0xNTQuNjg4LDE1NC42ODhjLTEuNjgsMS42OC0yLjgwLDMuNjY0LTMuNTUyLDUuNzc2QyAyNzMuMjgsOTAuODQsIDIzNC4zMiw3Ny4wMCwgMTkyLjAwLDc3LjAwCglDIDg1Ljk2OCw3Ny4wMCwwLjAwLDE2Mi45NjgsMC4wMCwyNjkuMDBDMC4wMCwzNzUuMDMyLCA4NS45NjgsNDYxLjAwLCAxOTIuMDAsNDYxLjAwYyAxMDYuMDMy LDAuMDAsIDE5Mi4wMC04NS45NjgsIDE5Mi4wMC0xOTIuMDBjMC4wMC00Mi4zMi0xMy44NC04MS4yOC0zNy4wMjQtMTEzLjAwOAoJYyAyLjExMi0wLjc1MiwgNC4wOTYtMS44NTYsIDUuNzc2LTMuNTUyTCA1MDcuNDQtMi4yNDh6IE0gMTkyLjAwLDM5Ny4wMGMtNzAuNjg4LDAuMDAtMTI4LjAwLTU3LjMxMi0xMjguMDAtMTI4LjAwYzAuMDAtNzAuNjg4LCA1Ny4zMTItMTI4LjAwLCAxMjguMDAtMTI4LjAwcyAxMjguMDAsNTcuMzEyLCAxMjguMDAsMTI4LjAwCglDIDMyMC4wMCwzMzkuNjg4LCAyNjIuNjg4LDM5Ny4wMCwgMTkyLjAwLDM5Ny4wMHoiIC8 + CjxnbHlwaCB1bmljb2RlPSImI3gyMjsiIGQ9Ik0gMjU2LjAwLDEzLjQ5NmMtMTAuMzg0LDAuMDAtMjUuNTg0LDExLjY4LTM1LjY2NCwxMi43NTJjLTI4Ljc1Mi0yNC4xMTItNTguNzA0LTUzLjEzNi05OS40MjQtNjguMjI0CgljLTE3Ljc3Ni03LjUzNi0zMy4wNC0xMS45MDQtMzcuMDA4LTcuMTUyYy01LjMyOCw2LjE5Mi0xMy4zNzYsMTQuNzg0LTE0LjgwLDE3LjA4OGMgMC4wOCwzLjQyNCwgNC4yMjQsMC43MiwgOC43MzYsNS41ODQKCWMgMjQuNTc2LDEwLjMzNiwgNDAuNDQ4LDM3LjAwOCwgNTEuMTIsNjkuNjE2QyA1MS45ODQsODEuNzM2LDAuMDAsMTU0LjEwNCwwLjAwLDIzNy4yMDhDMC4wMCwzNjAuNzQ0LCAxMTQuNjI0LDQ2MC45MDQsIDI1Ni4wMCw0NjAuOTA0cyAyNTYuMDAtMTAwLjE0NCwgMjU2LjAwLTIyMy42OTYKCVMgMzk3LjM3NiwxMy40OTYsIDI1Ni4wMCwx My40OTZ6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjM7IiBkPSJNIDM2OC4wMCw0MjkuMDBjLTM4LjQ2NCwwLjAwLTY5LjI5Ni0xMy44MDgtOTYuNDgtNDEuMDA4Yy0wLjAxNi0wLjAxNi0wLjAzMi0wLjAzMi0wLjA0OC0wLjA0OAoJbC0wLjAxNiwwLjAwTCAyNTYuMDAsMzY4LjQ3MkwgMjQwLjU0NCwzODYuNzZjLTAuMDE2LDAuMDE2LTAuMDMyLDAuMDMyLTAuMDQ4LDAuMDQ4TCAyNDAuNDgsMzg2LjgwOCBsMC4wMCwwLjAwQyAyMTMuMjgsNDE0LjAyNCwgMTgyLjQ2NCw0MjkuMDAsIDE0NC4wMCw0MjkuMDBTIDY5LjM3Niw0MTQuMDI0LCA0Mi4xNzYsMzg2LjgyNAoJQyAxNC45OTIsMzU5LjYyNCwwLjAwLDMyMy40NjQsMC4wMCwyODUuMDBjMC4wMC0zOC40MzIsIDE0Ljk2LTc0LjU5MiwgNDIuMTI4LTEwMS43NzZMIDIzMy4yOC05LjUyOEMgMjM5LjI4LTE1LjU5MiwgMjQ3LjQ3Mi0xOS4wMCwgMjU2LjAwLTE5LjAwcyAxNi43MiwzLjQwOCwgMjIuNzIsOS40NzIKCWwgMTkxLjEzNiwxOTIuNzUyQyA0OTcuMDI0LDIxMC40MDgsIDUxMi4wMCwyNDYuNTUyLCA1MTIuMDAsMjg1LjAwYzAuMDAsMzguNDY0LTE0Ljk5Miw3NC42MjQtNDIuMTc2LDEwMS44MjRDIDQ0Mi42MjQsNDE0LjAyNCwgNDA2LjQ2NCw0MjkuMDAsIDM2OC4wMCw0MjkuMDBMIDM2OC4wMCw0MjkuMDB6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjQ7IiBkPSJNIDI1Ni4wMCwzNjUuMDBDIDExNC42MDgsMzY1LjAwLDAuMDAsMjA1LjAwLDAuMDAsMjA1LjAwcyAx MTQuNjA4LTE2MC4wMCwgMjU2LjAwLTE2MC4wMHMgMjU2LjAwLDE2MC4wMCwgMjU2LjAwLDE2MC4wMFMgMzk3LjM5MiwzNjUuMDAsIDI1Ni4wMCwzNjUuMDB6IE0gMjU2LjAwLDEwOS4wMAoJCQljLTUzLjAwOCwwLjAwLTk2LjAwLDQyLjk5Mi05Ni4wMCw5Ni4wMHMgNDIuOTkyLDk2LjAwLCA5Ni4wMCw5Ni4wMHMgOTYuMDAtNDIuOTkyLCA5Ni4wMC05Ni4wMFMgMzA5LjAwOCwxMDkuMDAsIDI1Ni4wMCwxMDkuMDB6IE0gMjU2LjAwLDI2OS4wMGMtMzUuMzQ0LDAuMDAtNjQuMDAtMjguNjU2LTY0LjAwLTY0LjAwcyAyOC42NTYtNjQuMDAsIDY0LjAwLTY0LjAwcyA2NC4wMCwyOC42NTYsIDY0LjAwLDY0LjAwCgkJCVMgMjkxLjM0NCwyNjkuMDAsIDI1Ni4wMCwyNjkuMDB6IiAvPjwvZm9udD48L2RlZnM + PC9zdmc +) formato ( 'SVG'), url (dati: 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 == formato ('truetype'); font-weight: normal; stile font: normale;Queste poche righe di CSS ora avranno il Carattere icona personalizzato pronto per funzionare su tutti i browser moderni. Se si desidera supportare la modalità di compatibilità IE9 e le versioni precedenti di IE, è necessario aggiungere una regola aggiuntiva (si noti che questo preleverà risorse aggiuntive, ma solo quando l'Agente utente le richiederà).
@ font-face font-family: 'customFont'; src: url ('... /fonts/customFont.eot'); src: url ('... /fonts/customFont.eot?#iefix') format ('embedded-opentype'); font-weight: normal; stile font: normale;Curioso di queste correzioni di IE? Paul Irish ha un ottimo post sul blog su una sintassi bullet-font-face a prova di proiettile.
Ora che le nostre regole sono state create, ci sono due modi in cui possiamo includere il carattere personalizzato nel nostro progetto, entrambi i quali usano le entrate di Unicode per fare riferimento all'icona pertinente. La cosa bella dell'app IcoMoon è che tutto il CSS è già stato generato per noi, pronto per essere copiato nel nostro foglio di stile principale, a seconda dell'approccio che decidiamo di usare (o di entrambi).
Uso del carattere dell'icona: Approccio all'icona dei dati
La prima tecnica per usare il tuo font icon è l'approccio data-icon, che mantiene il nostro markup bello e pulito ed è amichevole per screen reader.
Diciamo che vogliamo includere un'icona di commento (in questo caso con il valore unicode di
& # X22;) all'interno di un elemento span sulla nostra pagina.Il nostro HTML:
Il CSS pertinente (preso direttamente dal foglio di stile IcoMoon scaricato) è il seguente (i commenti sono miei).
/ * A: prima che lo pseudoelemento venga creato per qualsiasi elemento HTML con l'attributo icona dati * / [icona-dati]: prima di / * La famiglia di caratteri è impostata sul nome impostato nella nostra regola @ font-face * / font-family : 'customFont'; / * Il contenuto per lo pseudo elemento viene prelevato dall'icona di dati HTML (ad es. ") * / Content: attr (data-icon); / * Ulteriori istruzioni per gli screen reader (non riconosciuti universalmente) * / speak: none; / * Stile font universale * / font-weight: normal; -webkit-font-smoothing: antialiased; span / * Carattere specifico-styling * / font-size: 2em; colore: # A2A2A2; padding: 2px 5px 2px 5px; margin-right: 5px;Sebbene questo approccio sia semplice e snello ed eviti un'ulteriore espansione della classe nel markup, potrebbe non essere la scelta migliore per il codice mantenibile. A meno che la memoria dei caratteri Unicode sia sia enciclopedica che fotografica, questo approccio non contiene alcuna informazione all'interno dell'HTML che ti rimandi a quale icona verrà visualizzata.
Uso del carattere dell'icona: Approccio di classe aggiuntivo
Come approccio alternativo, puoi scegliere di utilizzare classi CSS aggiuntive nel tuo codice HTML per visualizzare l'icona. Questo ha il vantaggio di immettere informazioni semantiche e descrittive direttamente nel tuo markup, migliorando la leggibilità del tuo codice.
Per utilizzare questo approccio, aggiungi un elemento nel tuo codice HTML con un nome di classe fornito dal foglio di stile IcoMoon:
Il nostro CSS sarà simile a questo (i commenti sono miei).
/ * La regola verrà applicata a qualsiasi elemento HTML con una classe di 'icon- * l e imposta uno pseudo-elemento per l'elemento * / [class ^ = "icon -"]: before, [class * = "icon- "]: before / * La famiglia di font è impostata sul nome impostato nella nostra regola @ font-face * / font-family: 'custom'; stile font: normale; parla: nessuno; font-weight: normal; -webkit-font-smoothing: antialiased; .icon-comment: before / * Il contenuto per lo pseudo elemento è impostato in unicode con escape (ad esempio "diventa '/ 22') * / content:" \ 22 ";Ora, con un po 'di stile aggiuntivo, puoi facilmente implementare fantastici font di icone nel tuo prossimo progetto - senza appesantire il tuo albero dei beni con risorse aggiuntive.
Conclusione
Grazie per aver dedicato del tempo ad esplorare alcuni dei modi in cui puoi ottenere il massimo dall'URI dei dati per il tuo prossimo progetto.
È importante ricordare che gli URI dei dati non lo sono sempre la migliore soluzione. Mentre l'uso di CSS3, SVG e Icon Fonts hanno alcuni vantaggi molto interessanti sull'uso delle immagini (specialmente nel campo del responsive design), i vantaggi della codifica delle immagini in base64 sono più sfumati. Quando consideri se utilizzare o meno gli URI di dati nel tuo prossimo progetto, valuta i tempi di caricamento e le richieste HTTP ridotte con la manutenibilità del codice: considera gli URI dei dati come un altro strumento nella tua casella degli strumenti!
Ti è piaciuto questo tutorial e ora sei pronto a iniziare a utilizzare queste tecniche in un modo più pratico? Tieni d'occhio i nuovi contenuti premium presto dove utilizzeremo estesamente gli URI di dati per creare un design leggero dell'interfaccia utente. Guarda questo spazio!
Come hai usato i font di icone e gli URI di dati nei tuoi progetti? Iscriviti e lascia un commento!
Risorse addizionali
