Cum să știți ce fonturi folosește un site web

Dacă ați văzut vreodată un site web deosebit de atractiv și v-ați întrebat cum să vedeți ce fonturi folosește un site web, răspunsul este la fel de simplu ca deschiderea inspectorului browserului dvs. Fiecare fragment al unui site web este interpretat în browserul dumneavoastră. Astfel, dacă știi să folosești corect inspectorul browser-ului tău poți afla nu doar sursele, ci și imaginile pe care le are, proprietățile CSS ale oricărui alt element găsit în pagină.

În această postare, vom vedea cum să folosiți inspectorul browserului Chrome pentru a găsi ce fonturi folosește un site web și chiar cum să începeți să vă jucați cu ele. Dar mai întâi, vă voi explica cum să-l accesați și ce caracteristici aveți disponibile în inspector.

Accesați Chrome Inspector

Dacă utilizați browserul Chrome și doriți să inspectați un site web, primul lucru pe care ar trebui să-l faceți este să accesați fereastra de inspector. Există mai multe moduri de a face acest lucru:

• Prin apăsarea tastei F12 sau
• Făcând clic dreapta pe un anumit articol și în meniul care se deschide, accesați opțiunea Inspect . Avantajul acestei metode este că evidențiază direct elementul în cauză, sau
• Prin apăsarea combinației de taste Control + Shift + I (pe Windows) sau Cmd + Alt + I (pe Mac) sau
• Accesând meniul Chrome (3 puncte în bara din dreapta sus) » Mai multe instrumente » Instrumente pentru dezvoltatori.

Fereastra de inspector poate fi afișată integrată în fereastra browserului propriu-zis sau afișată într-o fereastră separată. Pentru a accesa aceste opțiuni, puteți face acest lucru făcând clic pe pictograma de configurare (3 puncte) din partea dreaptă sus a inspectorului și modificând valoarea proprietății «Dock Side».

Aveți și opțiunea de a vizualiza conținutul paginii în modul vizualizare computer sau ca și cum l-ați vizualiza pe un dispozitiv mobil. Faceți clic pe al doilea buton din partea stângă a barei de sus a inspectorului și veți vedea cum va fi afișat automat conținutul ca și cum l-ați accesa de pe un dispozitiv mobil.

De asemenea, puteți indica tipul de dispozitiv pe care doriți să îl afișați, dimensiunea sau dacă doriți să îl afișați în modul portret sau peisaj.

Filele principale ale inspectorului

După cum poate ați văzut, inspectorul este format din diferite file.

Din fiecare dintre ele veți avea acces la diferite funcționalități și caracteristici:

• Elemente : arată codul HTML al paginii, precum și stilurile care sunt aplicate. de asemenea, le puteți modifica și adăuga rapid reguli noi.
• Consolă : arată diferitele mesaje de eroare și avertisment care apar pe pagină (imagini care nu se încarcă, erori de javascript,...)
• Surse : afișează arborele de resurse pentru pagină. Puteți vedea de unde sunt obținute diferitele resurse și le puteți modifica.
• Rețea : arată diferitele solicitări făcute de pe site, accesarea conținutului solicitării, răspunsul obținut, timpii...
• Performanță : arată procesele care rulează și servește la măsurarea performanței paginii.
• Memorie : arată memoria consumată în timpul încărcării și execuției paginii web.
• Aplicație : afișează informații utile despre resursele utilizate de o aplicație web.
• Securitate : afișează informații despre diferitele site-uri accesate din pagină și certificatele respective.
• Audituri : vă permite să generați un raport de audit pentru a verifica erorile.
• Există pluginuri care adaugă file și funcționalități la inspector, așa că pot exista mai multe file. În imaginea anterioară, se arată că am instalat pluginul Redux DevTools .

Fila Elemente

Să revenim acum la problema în discuție: am vrut să știm fontul oricărui conținut de pe o pagină web.

După cum am menționat anterior, din fila Elemente puteți accesa codul HTML și stilurile diferitelor elemente din pagina în care vă aflați.

După cum puteți vedea în imaginea de mai sus, în stânga aveți fereastra principală care vă arată codul sursă. Și în dreapta, aveți panoul de reguli de stil CSS care sunt aplicate diferitelor elemente ale paginii.

De fapt, în panoul de stiluri aveți trei file:

• Stiluri : arată regulile CSS aplicate și puteți modifica și adăuga altele noi.
• Calculat : arată toate regulile aplicate elementului, cu un panou care reprezintă marginile, marginile și umplerea elementului.
• Event Listeners : arată arborele evenimentelor care au fost lansate pe pagină și controalele afectate de acestea.

Vizualizați detaliile unui articol

Deci, de exemplu, dacă accesați pagina noastră principală Nelio Software, selectați cuvintele Nelio Software din titlu și faceți clic dreapta pentru a inspecta ce este articolul, inspectorul se deschide arătându-vă imaginea de mai sus.

În imaginea inspectorului, puteți vedea că fereastra principală îmi spune că stilul de titlu „Nelio Software” este h1 .

În aceeași fereastră, aveți opțiunea de a face clic dreapta pe orice atribut sau text și de a-l modifica sau șterge. Evident, orice modificare pe care o faceți aici nu va schimba conținutul original, dar este tocmai un instrument foarte util atunci când proiectați pagini și doriți să vă faceți o idee despre cum arată orice modificare pe care o faceți.

Vezi fontul

Acum știi că este un titlu, dar cum rămâne cu fontul?

Ei bine, foarte simplu, în fila Computed a inspectorului veți găsi toate proprietățile articolului selectat. Derulați în jos până la atributul font-family și acolo veți găsi exact fontul care are titlul site-ului nostru.

Și dacă ești curios cum ar arăta acel element dacă ai vrea să schimbi fontul, mergi la fila Stiluri , cobori la atributul font-family și îl poți modifica direct cu valoarea dorită.

Veți vedea automat site-ul dvs. web cu tipul de font modificat

După cum puteți vedea, inspectorul Google Chrome este un instrument foarte confortabil și ușor de utilizat pentru a juca și a încerca designul pe care l-ați fi lăsat după aplicarea oricărei modificări unui element.

Dar fontul unei imagini?

Inspectorul Google Chrome, după cum ați văzut, vă permite să vizualizați proprietățile oricărui element de pe pagina dvs. Dar dacă ceea ce vrei să vezi fontul unei imagini pe un site web, nu vei putea vedea asta cu inspectorul. Inspectorul vă va arăta proprietățile imaginii ca atare introduse în pagina dvs. dar nu vă va afișa detaliile conținutului acelei imagini.

Pentru a face acest lucru, există câteva instrumente, cum ar fi Font Squirrel Matcherator sau Whatfontis.com, care vă pot ajuta să identificați fontul folosit într-o imagine. Pentru a face acest lucru, în ambele instrumente trebuie fie să descărcați imaginea (la whatfontis.com puteți indica și adresa URL a imaginii) și apoi să selectați partea din imagine care conține litera pe care doriți să o identificați.

Ambele instrumente vă vor afișa un întreg set de fonturi care se potrivesc aproximativ cu textul selectat. Dar dacă bănuiți că aceasta nu este o potrivire exactă, puteți căuta pe Google fonturi similare cu cele indicate de instrument și veți vedea ce obțineți.

Imagine prezentată a Gemma Evans pe Unsplash.