Share
Să analizăm o abordare alternativă pentru afișarea de logo-uri pe o pagină Web. În mod normal, veți aborda provocarea prin utilizarea unui
În primul rând, un cuvânt rapid despre branding. Identitatea vizuală (atunci când este făcută în mod corespunzător) este proiectată foarte bine și foarte specific. Tipografia, culorile, spațiile libere, variantele - aruncați o privire prin liniile directoare privind branding-ul corporativ al oricărui produs sau companie și veți deveni rapid conștienți de marjele minime de interpretare.
Logosul nu poate fi aproximat; acestea trebuie reproduse precis, de aceea suntem dependenți de fișierele imagine pentru a le afișa pe paginile web.
Cele mai multe pagini web afișează o siglă (ceea ce te face să te întrebi de ce nu există
sau prin utilizarea unei tehnici de înlocuire a imaginii cu privire la conținutul ancorei:
Siglă
h1 a # logo font: 0/0; text-umbra: nici unul; culoare: transparent; fundal: url (images_19 / ta-logo-as-a-web-font-ligature.png);
Este în regulă. Marcajul spune "o rubrică importantă, link către pagina de pornire, cu conținut indexabil (accesibil) pentru a ne spune despre ce este vorba". CSS schimba conținutul pentru branding 100% vizibil.
Dar ce se intampla cu problema ecranelor cu densitate mare de pixeli. Pentru ca tehnicile de mai sus să funcționeze într-o lume a retinei, oa doua versiune hi-res a logo-ului ar trebui să fie servită când este necesar. Sau o versiune SVG în schimb. Ambele posibilități, dar ce zici de faptul că ne bazăm pe fonturile web prin desenarea propriei ligaturi?
Gandeste-te la asta:
Pentru o explicație detaliată, aruncăm o privire la Anatomia noastră de tipografie web. Pentru a rezuma, ligaturile sunt combinații de perechi de caractere proiectate în mod intenționat. Dacă două caractere într-un font arată ciudat atunci când sunt plasate unul lângă celălalt (fl fiind un exemplu clasic), o ligatura poate fi concepută pentru a ajuta. Ligatura de ligatura este apoi "mapată la" (asociată cu) combinația de litere în cauză. Când browserul întâlnește această combinație, comută literele afară pentru o singură ligatură.
Una dintre multele ligaturi disponibile de la Adobe Caslon Pro Acest principiu nu trebuie să se aplice numai literei perechi fie; glifurile pot fi mapate la șiruri întregi.
Ligatura noastră de ligatură va fi o siglă de aplicație falsă (numită "Vectr", ultima vocală a fost eliminată pentru a dovedi că este o aplicație ...) și va fi mapată la șirul "Vectr".
Nu face nici o greseala, IcoMoon a facut acest proces simplu pezar. Înainte de a veni de la IcoMoon, ar fi trebuit să folosiți o aplicație de proiectare a fonturilor (editorul fonturilor SVG din Inkscape fiind unul dintre puținele modalități de a face acest lucru la îndemână) pentru a alinia și a cartografia fiecare glif. Apoi salvați fișierul, cu noroc direct ca TTF (TrueType), alternativ ca SVG, după care ați convertit la TTF folosind un alt instrument. Apoi, în sfârșit, ați încărcat TTF-ul dvs. într-un generator webfont pentru a vă oferi produsul final.
Cu IcoMoon, tot ce trebuie să faceți este ...
Înainte de a începe ceva, vom avea nevoie de un logo, în formă vectorică. Multe formate de fișiere vectoriale pot fi deschise și editate într-o serie de aplicații grafice. Encicloped Post PostScript (EPS), PostScript (PS), Document Portable Format (PDF) și Scalable Vector Graphics (SVG) fiind câteva exemple comune pentru manipularea vectorilor.
Folosesc Adobe Illustrator în acest exemplu, dar întregul proces poate fi aplicat altor aplicații (cum ar fi open source Inkscape).
În primul rând, acordați atenție tabloului de bord. Proiectăm într-adevăr un glif de font, care în circumstanțe TrueType ar fi un pătrat de 512, 1024 sau 2048 pixeli. Aceasta este o convenție, nu o cerință, dar vom opta pentru 1024 de pixeli pentru a ne oferi o grilă solidă de 64x16; ideal pentru proiectarea de fonturi în jurul unei dimensiuni implicite de 16 pixeli.
Gliful nostru va fi afișat în jurul întregului pătrat, definind în mod eficient măsurarea "EM".
Când se proiectează fonturi întregi, este important să se poziționeze toate caracterele relativ unele pe altele pe această pânză, astfel încât toți să se așeze cu ușurință de-a lungul aceleiași linii de bază.
Mă abat ...
Cu logo-ul poziționat corect pe tabloul de bord, vom salva fișierul ca SVG. Nu există nici o diferență mare (în ceea ce privește scopurile noastre) în diferitele setări SVG, mergeți doar la setările implicite și apăsați pe "salvați".
Activați aplicația web IcoMoon.io. IcoMoon (dezvoltat de foarte inteligentul @Keyamoon) vă permite să alegeți pictogramele icoane pick'n'mix, să le cartografiați pe caracterele alese de dvs., apoi să descărcați pachetul @ font-face pentru utilizare pe web.
Aceasta de asemenea vă permite să încărcați propriile glife (ca SVG sau TTF) pentru a adăuga colecția dvs. Importați fișierul SVG pe care tocmai l-am făcut, apoi verificați-l mai mult sau mai puțin bine în miniatură.
Puteți să repoziționați sigla și să efectuați mici modificări apăsând butonul creion și făcând clic pe miniatură. De fapt, în ecranul de editare puteți vedea că există o problemă cu bilele de la sfârșitul fiecărui mâner din logo.
Vedeți unde se intersectează formele? Nu am combinat toate obiectele vectoriale împreună în Illustrator, așa că trebuie să mă întorc și să fiu sigur că s-a făcut corect.
Cu totul în ordine, să ne construim o colecție de icoane.
Selectați oricare dintre pictogramele de care aveți nevoie, inclusiv logo-ul dvs., apoi faceți clic pe "(Generare) Font". În acest moment veți primi o previzualizare a fiecărui glif, inclusiv caracterele sau entitățile unicode la care vor fi mapate.
Puteți defini personajele dvs. (dacă doriți) sau, ca în cazul nostru, puteți defini un întreg șir de caractere care să acționeze ca o ligatură.
Deschideți meniul Preferințe și bifați caseta de selectare "Enable Ligatures". Acum putem introduce un șir de ligaturi personalizat în caseta de deasupra glifului. În cazul nostru, "Vectr" (și acest lucru este cazul sensibil, desigur).
În fereastra Preferințe puteți de asemenea să optați să descărcați fontul ca Base64, încorporat în CSS în loc să stea pe server ca fișiere de fonturi separate. Opresc codarea Base64, deoarece ne salvează chiar mai mult Solicitări HTTP.
Acum, când ați lovit descărcarea, veți fi împodobită cu un demo complet funcțional; un fișier HTML, toate fișierele de fonturi și CSS-ul însoțitor.
CSS implicit vă oferă posibilitatea de a selecta toate elementele cu a [Date-icon] atribut sau direct folosind o clasă pe care o alegeți pe elementele pe care doriți să le aplicați fișierul de fonturi. De asemenea, avem o întreagă încărcătură de reguli tipice CSS tipice; dintre care unele sunt specifice browserului, dar toate merită luate o privire la:
vorbesc: nici unul; / * Activați linkurile * / -webkit-font-feature-settings: "liga", "dlig"; -moz-font-feature-settings: "liga = 1, dlig = 1"; -moz-font-feature-setări: "Liga", "dlig"; -MS-font-feature-setări: "Liga", "dlig"; font-o- feature-setări: "Liga", "dlig"; font-feature-setări: "Liga", "dlig"; Text-redare: optimizeLegibility; font-style: normal; font-weight: normal; font-varianta: normal; text-transform: nici unul; linia-înălțime: 1; -webkit-font-smoothing: antialiased;
Există câteva reguli experimentale destul de bune pentru a se asigura că ligaturale sunt utilizate acolo unde este posibil, apoi alte reguli (mai standard) care reseta afișarea textului pentru elementele în cauză. Înainte de toate veți vedea vorbesc: nici unul; care împiedică conținutul să fie "rostit" de dispozitivele relevante (poate că nu este necesar în cazul logo-ului nostru). Atunci veți observa optimizeLegibility și webkit's font-netezirea, toate bunele practici pentru a ne asigura că tipografia noastră este afișată în mod optim în diferite browsere.
Oricum, ignorând aceste stiluri pentru toate, toate noi trebuie să vă asigurați că elementul de logotip are aplicat noua familie de fonturi:
Vectr
.logo-ul font-family: 'vectr';
Asta e! Ori de câte ori browserul nostru întâlnește un element cu clasa "logo", cu conținutul "Vectr", logo-ul nostru va fi afișat. Acum, numai prin CSS, putem modifica dimensiunea, culoarea, diverse alte efecte CSS și toate rezoluțiile independente de 100%.
Sprijină-te: ligaturile nu sunt acceptate de IE9 și mai devreme. Opera a eliminat de asemenea suportul de la versiunea 10 (deși Opera se mută în Webkit, care se va schimba probabil în curând). Toate celelalte browsere moderne, inclusiv platformele mobile, joacă destul de bine mingea, dar va trebui să vă asigurați că aveți o soluție alternativă pentru versiunile mai vechi ale Internet Explorer.
O modalitate de a face acest lucru ar fi să utilizați clase condiționate pe eticheta HTML:
Acestea vă permit să identificați toate versiunile de IE; totul mai devreme decât IE10 aici este dat clasei lt-IE10. Puteți apoi să ignorați stilurile de logo în browserele anterioare, definind o alternativă la ligatura webfont:
html.lt-ie10 .logo fundal: ceva-sau-alt-schimbare-font-familie-și-așa-on;
Accentsconagua