Share
Să ne uităm la îmbunătățirea performanței site-ului prin reducerea numărului de cereri HTTP pe care le face. Vom profita de o tehnică cunoscută sub denumirea de schemă URI de date; codarea atât a imaginilor, cât și a fonturilor în șiruri de date pure care pot fi integrate direct în marcajele și foile de stil.
miniatură: Broccolidideiconsaniconsetitisfulfulf ... icoane de Visual Idiot (vom folosi aceste pictograme într-un minut ...)
Dat fiind că conexiunile la internet au devenit mai rapide, iar computerele mai puternice, performanța site-ului a fost o bună practică de multe ori neglijată. Astăzi, asigurați-vă că site-ul dvs. funcționează bine este absolut vital pentru păstrarea fericită a utilizatorilor dvs. și a motoarelor de căutare; mai ales atunci când site-ul este accesat folosind date mobile și telefoane slab alimentate și alte dispozitive.
Ne-am uitat deja la CSS Sprite Sheets: Cele mai bune practici, instrumente și aplicații utile înainte de Webdesigntuts +, care demonstrează modul în care puteți îmbunătăți performanța prin reducerea solicitărilor HTTP și reducerea dimensiunii întregului fișier imagine. Dar ați știut că puteți reprezenta o imagine (de fapt orice date binare) în HTML sau CSS folosind doar un șir de text ASCII?
Această tehnică este cunoscută ca schema URI de date și, de fapt, nu este nouă. Cu toate că URI-urile de date au plutit în jur de zece ani, ele au câștigat popularitate destul de recent cu compatibilitate extinsă a browser-ului și cu accent pe îmbunătățirea performanței site-ului.
Beneficiul principal al utilizării URI-urilor de date este îmbunătățirea performanței. Orice resurse care sunt utilizate pe site-ul dvs. sunt preluate de browserul dvs. folosind o cerere HTTP. Aceasta include totul, de la foi de stil, la fișiere JavaScript, la imagini. Indiferent de viteza conexiunii la internet, aproape toate browserele limitează cantitatea maximă de solicitări HTTP concurente la două la un moment dat, rezultând într-adevăr o strangulare a datelor. Cu cât mai multe solicitări HTTP trebuie făcute, cu atât va fi mai slabă performanța generală a site-ului.
Combinând datele de imagine în codul HTML sau CSS al site-ului elimină instantaneu nevoia ca browserul să preia resurse suplimentare. Deși datele brute bazate pe Base64 sunt în general considerate a fi cu aproximativ 33% mai mari decât corespondentul optimizat (de exemplu o imagine), după gzipping și optimizarea fișierelor CSS, diferența de dimensiune a fișierului este în general neglijabilă.
Un URI de date este, în esență, date binare codate într-un format Base64, împreună cu unele informații suplimentare pentru browser, inclusiv un tip MIME, un Charset și formatul de codare (Base64).
URI-ul de date (în forma sa cea mai simplă) arată astfel:
Date: [] [; charset =] [; base64],
Pentru a utiliza un URI de date ca o imagine HTML în linie, formatul arată astfel:
Pentru a utiliza un URI de date ca imagine de fundal repetată în CSS, formatul este după cum urmează:
Accentsconagua
corpul fundal-imagine: url ('data: image / png; base64'); background-repeat: repetați; Alternativ, combinați elementele de fundal cu o scurtă descriere CSS:
div.logo fundal: url ('data: image / png; base64'); margine: 20px 10px 0 10px; În timp ce am folosit imagini pentru a ilustra utilizarea URI-urilor de date, pot fi utilizate aproape orice suporturi media, inclusiv fișiere multimedia, fonturi (după cum vom vedea în curând) și multe altele.
OK, hai să facem niște exemple practice. Să luăm următoarea imagine (o piesă repetată pe care am descărcat-o de la modelele subtile), să o convertesc într-un URI de date și să utilizez CSS pentru a crea un fundal repetat pentru un site sau o interfață.
Deși datele URI de date pot părea destul de funky, procesul de creare a acestora este foarte simplu.
Mai întâi, deplasați-vă la aplicația Web Semantics Data URI Converter și încărcați imaginea selectând locația fișierului și făcând clic pe instrumentul "Conversie imagine":
Odată ce ați procesat, dacă derulați în jos pagina, veți vedea ce arată această imagine ca encoded base64:
Deoarece avem nevoie de un fundal repetat pentru proiectul nostru, va trebui să modificăm CSS-ul pe care ni l-a dat instrumentul.
Pentru un fundal repetat, copiați și inserați următorul CSS:
div.logo background-repeat: repet; background-image: url (date: 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 = );
Să luăm un exemplu și mai simplu, transformând următoarea imagine într-un URI de date și plasându-l în marcajul nostru ca imagine inline:
Urmați pașii de mai sus pentru a transforma imaginea într-o imagine codată în baza de date și copiați marcajul HTML generat de instrument (din panoul "As An Image") și inserați-l direct în marcajul HTML în același mod pe care l-ați inserat o imagine inline obișnuită.
Codul final pentru acest exemplu arată astfel:
Nu există reguli grele și rapide cu privire la momentul utilizării URI-urilor de date pentru a înlocui activitățile site-ului, dar există o serie de dezavantaje și particularități pe care trebuie să le luați în considerare atunci când alegeți să utilizați URI de date sau nu.
Îți amintești de mine spunând asta orice datele binare pot fi utilizate în schema de date URI? Acum, că am analizat imaginile codate base64, să aruncăm o privire la transformarea unui font de pictogramă într-un URI de date și implementarea acestuia într-un proiect.
De fapt, URI-urile de date sunt o potrivire perfectă pentru fonturile de pictograme, mai ales dacă intenționați să utilizați doar câteva simboluri cu o dimensiune redusă a fișierelor.
Vom utiliza aplicația web web IcoMoon pentru a genera un set de fonturi personalizat, pentru a extrage URI-ul de date și a genera codul final CSS.
Mai întâi, mergeți la site-ul IcoMoon și faceți clic pe linkul "Începeți să utilizați aplicația":
Apoi, fie căutați seturile de fonturi pentru a selecta fonturile personalizate ale pictogramelor, fie că utilizați câmpul de căutare în partea stângă sus a paginii pentru a găsi fonturi care se potrivesc cu etichetele "Comment", "Heart", "Eye" și "Search".
Am folosit setul de caractere Broccolidry din Visual Idiot în acest exemplu.
Apoi, treceți la pagina de setări de descărcare făcând clic pe butonul "Font" din partea de jos a ecranului:
În pagina de setări de descărcare, modificați linia de bază la 10%, dați clic pe pictograma setări pentru a afișa opțiunile avansate și bifați caseta de selectare "Base64 Encode & Embed in CSS". Dați clic pe pictograma "Salvați" pentru a descărca fontul.
Odată ce ați descărcat și extras fonturile personalizate, puteți deschide fișierul "index.html" pentru a vizualiza fontul și împerecherile dvs. unicode:
Acum, când am creat setul de caractere personalizat pentru pictograme, să vedem cum îl putem folosi într-un proiect.
Mai întâi, deschideți foaia de stil oferită în descărcarea IcoMoon și găsiți următorul CSS. Din moment ce numele jocului este despre reducerea cererilor HTTP, vom copia și lipi toate CSS-ul furnizat în foaia de stil principală.
@ font-face font-family: 'customFont'; src: url (date: font / svg; charset = utf-8; base64, PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI / Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE + ClRoaXMgaXMgYSBjdXN0b20gU1ZHIGZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uCjEKPC9tZXRhZGF0YT4KPGRlZnM + Cjxmb250IGlkPSJjdXN0b21Gb250IiBob3Jpei1hZHYteD0iNTEyIiA + Cjxmb250LWZhY2UgdW5pdHMtcGVyLWVtPSI1MTIiIGFzY2VudD0iNDYxIiBkZXNjZW50PSItNTEiIC8 + CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSI1MTIiIC8 + CjxnbHlwaCB1bmljb2RlPSImI3gyMTsiIGQ9Ik0gNTA3LjQ0LTIuMjQ4YyA2LjA5Ni02LjA5NiwgNi4wOTYtMTUuOTg0LDAuMDAtMjIuMDk2bC0yMi4wOTYtMjIuMDk2CgljLTYuMTEyLTYuMDk2LTE2LjAwLTYuMDk2LTIyLjA5NiwwLjAwbC0xNTQuNjg4LDE1NC42ODhjLTEuNjgsMS42OC0yLjgwLDMuNjY0LTMuNTUyLDUuNzc2QyAyNzMuMjgsOTAuODQsIDIzNC4zMiw3Ny4wMCwgMTkyLjAwLDc3LjAwCglDIDg1Ljk2OCw3Ny4wMCwwLjAwLDE2Mi45NjgsMC4wMCwyNjkuMDBDMC4wMCwzNzUuMDMyLCA4NS45NjgsNDYxLjAwLCAxOTIuMDAsNDYxLjAwYyAxMDYuMDMy LDAuMDAsIDE5Mi4wMC04NS45NjgsIDE5Mi4wMC0xOTIuMDBjMC4wMC00Mi4zMi0xMy44NC04MS4yOC0zNy4wMjQtMTEzLjAwOAoJYyAyLjExMi0wLjc1MiwgNC4wOTYtMS44NTYsIDUuNzc2LTMuNTUyTCA1MDcuNDQtMi4yNDh6IE0gMTkyLjAwLDM5Ny4wMGMtNzAuNjg4LDAuMDAtMTI4LjAwLTU3LjMxMi0xMjguMDAtMTI4LjAwYzAuMDAtNzAuNjg4LCA1Ny4zMTItMTI4LjAwLCAxMjguMDAtMTI4LjAwcyAxMjguMDAsNTcuMzEyLCAxMjguMDAsMTI4LjAwCglDIDMyMC4wMCwzMzkuNjg4LCAyNjIuNjg4LDM5Ny4wMCwgMTkyLjAwLDM5Ny4wMHoiIC8 + CjxnbHlwaCB1bmljb2RlPSImI3gyMjsiIGQ9Ik0gMjU2LjAwLDEzLjQ5NmMtMTAuMzg0LDAuMDAtMjUuNTg0LDExLjY4LTM1LjY2NCwxMi43NTJjLTI4Ljc1Mi0yNC4xMTItNTguNzA0LTUzLjEzNi05OS40MjQtNjguMjI0CgljLTE3Ljc3Ni03LjUzNi0zMy4wNC0xMS45MDQtMzcuMDA4LTcuMTUyYy01LjMyOCw2LjE5Mi0xMy4zNzYsMTQuNzg0LTE0LjgwLDE3LjA4OGMgMC4wOCwzLjQyNCwgNC4yMjQsMC43MiwgOC43MzYsNS41ODQKCWMgMjQuNTc2LDEwLjMzNiwgNDAuNDQ4LDM3LjAwOCwgNTEuMTIsNjkuNjE2QyA1MS45ODQsODEuNzM2LDAuMDAsMTU0LjEwNCwwLjAwLDIzNy4yMDhDMC4wMCwzNjAuNzQ0LCAxMTQuNjI0LDQ2MC45MDQsIDI1Ni4wMCw0NjAuOTA0cyAyNTYuMDAtMTAwLjE0NCwgMjU2LjAwLTIyMy42OTYKCVMgMzk3LjM3NiwxMy40OTYsIDI1Ni4wMCwx My40OTZ6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjM7IiBkPSJNIDM2OC4wMCw0MjkuMDBjLTM4LjQ2NCwwLjAwLTY5LjI5Ni0xMy44MDgtOTYuNDgtNDEuMDA4Yy0wLjAxNi0wLjAxNi0wLjAzMi0wLjAzMi0wLjA0OC0wLjA0OAoJbC0wLjAxNiwwLjAwTCAyNTYuMDAsMzY4LjQ3MkwgMjQwLjU0NCwzODYuNzZjLTAuMDE2LDAuMDE2LTAuMDMyLDAuMDMyLTAuMDQ4LDAuMDQ4TCAyNDAuNDgsMzg2LjgwOCBsMC4wMCwwLjAwQyAyMTMuMjgsNDE0LjAyNCwgMTgyLjQ2NCw0MjkuMDAsIDE0NC4wMCw0MjkuMDBTIDY5LjM3Niw0MTQuMDI0LCA0Mi4xNzYsMzg2LjgyNAoJQyAxNC45OTIsMzU5LjYyNCwwLjAwLDMyMy40NjQsMC4wMCwyODUuMDBjMC4wMC0zOC40MzIsIDE0Ljk2LTc0LjU5MiwgNDIuMTI4LTEwMS43NzZMIDIzMy4yOC05LjUyOEMgMjM5LjI4LTE1LjU5MiwgMjQ3LjQ3Mi0xOS4wMCwgMjU2LjAwLTE5LjAwcyAxNi43MiwzLjQwOCwgMjIuNzIsOS40NzIKCWwgMTkxLjEzNiwxOTIuNzUyQyA0OTcuMDI0LDIxMC40MDgsIDUxMi4wMCwyNDYuNTUyLCA1MTIuMDAsMjg1LjAwYzAuMDAsMzguNDY0LTE0Ljk5Miw3NC42MjQtNDIuMTc2LDEwMS44MjRDIDQ0Mi42MjQsNDE0LjAyNCwgNDA2LjQ2NCw0MjkuMDAsIDM2OC4wMCw0MjkuMDBMIDM2OC4wMCw0MjkuMDB6IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjQ7IiBkPSJNIDI1Ni4wMCwzNjUuMDBDIDExNC42MDgsMzY1LjAwLDAuMDAsMjA1LjAwLDAuMDAsMjA1LjAwcyAx MTQuNjA4LTE2MC4wMCwgMjU2LjAwLTE2MC4wMHMgMjU2LjAwLDE2MC4wMCwgMjU2LjAwLDE2MC4wMFMgMzk3LjM5MiwzNjUuMDAsIDI1Ni4wMCwzNjUuMDB6IE0gMjU2LjAwLDEwOS4wMAoJCQljLTUzLjAwOCwwLjAwLTk2LjAwLDQyLjk5Mi05Ni4wMCw5Ni4wMHMgNDIuOTkyLDk2LjAwLCA5Ni4wMCw5Ni4wMHMgOTYuMDAtNDIuOTkyLCA5Ni4wMC05Ni4wMFMgMzA5LjAwOCwxMDkuMDAsIDI1Ni4wMCwxMDkuMDB6IE0gMjU2LjAwLDI2OS4wMGMtMzUuMzQ0LDAuMDAtNjQuMDAtMjguNjU2LTY0LjAwLTY0LjAwcyAyOC42NTYtNjQuMDAsIDY0LjAwLTY0LjAwcyA2NC4wMCwyOC42NTYsIDY0LjAwLDY0LjAwCgkJCVMgMjkxLjM0NCwyNjkuMDAsIDI1Ni4wMCwyNjkuMDB6IiAvPjwvZm9udD48L2RlZnM + PC9zdmc +) format ( 'SVG'), url (date: 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"); font-weight: normal; font-style: normal;Aceste cateva linii de CSS vor avea acum personalizat Fontul dvs. Icon personalizat pentru a lucra pe toate browserele moderne. Dacă doriți să acceptați modul de compatibilitate IE9 și versiunile vechi ale IE, va trebui să adăugați o regulă suplimentară (rețineți că aceasta va prelua resurse suplimentare, dar numai atunci când agentul de utilizator le solicită).
@ font-face font-family: 'customFont'; src: url ('... /fonts/customFont.eot'); src: url ('... /fonts/customFont.eot?#iefix') format ('embedded-opentype'); font-weight: normal; font-style: normal;Curios despre aceste corecții IE? Paul Irish are un post de blog bun pe o sintaxă de tip bulletproof @ font-face.
Acum, că regulile noastre au fost create, există două moduri în care putem include fontul personalizat în designul nostru, ambele folosind entități Unicode pentru a face referire la pictograma relevantă. Lucrul minunat al aplicației IcoMoon este că toate CSS-ul a fost deja generat pentru noi, gata să fie copiat în foaia de stil principală, în funcție de ce abordare vom decide să folosim (sau ambele).
Utilizarea pictogramei dvs. de pictograme: Abordarea datelor Icon
Prima tehnică pentru utilizarea fontului icoanelor este abordarea cu pictograme de date, care ne păstrează marcajul frumos și curat și este ușor de citit de ecran.
Să presupunem că dorim să includeți o pictogramă de comentariu (în acest caz, cu valoarea unicode a
& # X22;) în interiorul unui element de pe pagina noastră.HTML-ul nostru:
CSS relevante (luate direct din foaia de stiluri descarcate IcoMoon) este după cum urmează (comentariile sunt ale mele).
/ * A: înainte ca pseudo elementul să fie creat pentru orice element HTML cu atributul data-pictogramă * / [data-icon]: înainte de / * Fontul familiei este setat numele setat în regula @ font-face * / font-family : 'customFont'; / * Conținutul elementului pseudo este extras din pictograma de date HTML (de ex. ") * / Content: attr (data-icon); / * Instrucțiuni adiționale cititoarelor de ecran (nu sunt universal recunoscute) * / speak: none; * Stilul fontului Univeral * / font-weight: normal; -webkit-font-netezirea: antialiased; span / * Specific font-styling * / font-size: 2em; margin-dreapta: 5px;În timp ce această abordare este plăcută și simplificată și evită bloatul suplimentar al clasei în marcarea dvs., este posibil să nu fie cea mai bună alegere pentru un cod care să poată fi întreținut. Cu excepția cazului în care memoria dvs. de caractere Unicode este atât enciclopedică, cât și fotografică, această abordare nu conține nicio informație în cadrul codului HTML care vă sfătuiește să afișeze pictograma.
Folosirea fontului dvs. de pictogramă: Abordarea suplimentară a clasei
Ca o abordare alternativă, puteți alege să utilizați clase suplimentare CSS în HTML pentru a afișa pictograma. Acest lucru are avantajul de a introduce informații semantice, descriptive direct în marcajul dvs., sporind lizibilitatea codului.
Pentru a utiliza această abordare, adăugați un element în codul HTML cu un nume de clasă furnizat de foaia de stil IcoMoon:
CSS-ul nostru va arata asa (comentariile sunt ale mele).
/ * Această regulă va fi aplicată oricărui element HTML cu o clasă de 'icon- * l și va seta un element pseudo-element la element * / [class = = "icon -"]: înainte, [class * = " "]: înainte de / * Familia de fonturi este setată numele setat în regula @ font-face * / font-family: 'custom'; font-style: normal; vorbesc: nici unul; font-weight: normal; -webkit-font-smoothing: antialiased; .icon-comment: înainte de / * Conținutul pentru elementul pseudo este setat în unicode escape (adică devine '/ 22') * / content: "\ 22"Acum, cu un stil suplimentar suplimentar, puteți implementa cu ușurință fonturile cu pictograme excelente în următorul proiect - fără a vă îmbogăți arborele de materiale cu resurse suplimentare.
Concluzie
Vă mulțumim că ați acordat timp pentru a explora câteva dintre modalitățile prin care puteți profita la maximum de URI-urile de date pentru următorul proiect.
Este important să rețineți că datele URI de date nu sunt mereu cea mai bună soluție. În timp ce utilizarea CSS3, SVG și Icon Fonts are unele avantaje deosebite în ceea ce privește utilizarea imaginilor (mai ales în domeniul designului receptiv), beneficiile codării imaginilor în baza64 sunt mai nuante. Când analizați dacă doriți sau nu să utilizați URI-uri de date în următorul proiect, cântăriți timpii de încărcare și reduceți cererile HTTP cu mentenabilitate a codului - considerați URI-uri de date ca fiind un alt instrument în setul dvs. de instrumente!
Te-ai bucurat de acest tutorial și acum sunteți mâncărime pentru a începe să folosiți aceste tehnici într-un mod mai practic? Păstrați-vă ochii pentru noul conținut premium în curând în cazul în care vom folosi URI-uri de date pe scară largă pentru a crea un ușor de proiectare interfață utilizator. Priveste acest spatiu!
Cum ați folosit fonturi de icoane și URI de date în proiectele dvs.? Aboneaza-te și lasă un comentariu!
Resurse aditionale
