Cum să identifici fonturile de pe un site web

Ați găsit vreodată fontul perfect pentru site-ul dvs. pe un alt site, imagine sau blog, dar nu ați știut cum să îi găsiți numele? Ai venit la locul potrivit. În acest ghid, vă vom arăta cum să identificați fonturile de pe un site web pentru a vă ajuta să găsiți tipografia perfectă pentru afacerea dvs.

De ce este util să vedem ce fonturi folosește un site web?

Dacă lucrați la construirea site-ului dvs. web sau la proiectarea conținutului dvs. online, sunteți mereu în căutarea modalităților de a-l îmbunătăți. Puteți face asta în multe feluri. Cele mai evidente sunt folosirea unei teme diferite, adăugarea de funcționalități și furnizarea de conținut mai bun. Dar există și alte lucruri nu atât de evidente pe care le poți face pentru a avea un avantaj față de concurenții tăi și pentru a face site-ul tău unic. Fontul este unul dintre ele.

Fontul pe care îl utilizați este peste tot pe site și nu numai că poate îmbunătăți lizibilitatea , ci și navigarea generală. Dacă tipografia dvs. pare profesionistă și este ușor de citit, este mai probabil ca vizitatorii să rămână pe site-ul dvs. Fonturile sunt adesea trecute cu vederea, dar pot avea un impact mare.

Chiar dacă puteți adăuga fonturi pe site-ul dvs., este posibil să doriți să utilizați o tipografie pe care nu o găsiți prin metode tradiționale. Internetul este plin de site-uri web cu o tipografie frumoasă pe care ați putea dori să le utilizați pe site-ul dvs. Cu toate acestea, partea dificilă este să identifici fonturile pe care acele site-uri web le folosesc. Nu există o modalitate ușoară de a găsi un font și chiar dacă ești un expert, există o mulțime de diferențe minuscule în fiecare font. În plus, aceste diferențe pot fi amplificate de stilurile de font și modificările CSS.

De aceea, în această postare, vă vom arăta cum să utilizați diferite instrumente pentru a afla ce fonturi folosește un site web .

Cum să identifici fonturile de pe un site web

Există mai multe moduri de a identifica fonturile pe un site web:

1. Folosind instrumentul de inspectare
2. Cu pluginuri
   1. FFFFallback
   2. Izvor
   3. Fontanello
   4. Ce font

Unele dintre acestea sunt mai dificil de utilizat decât altele și unele pot necesita instrumente și extensii externe. Să aruncăm o privire mai atentă asupra tuturor acestor metode diferite.

1) Identificați fonturile folosind Instrumentul de inspectare

Cel mai elementar mod de a identifica fonturile de pe un site web este utilizarea instrumentului de inspectare al browserului . Pentru aceasta, va trebui să deschideți instrumentele de dezvoltare ale browserului dvs. De obicei, puteți face acest lucru în câteva moduri diferite:

• Apăsând F12 sau Ctrl+Shift+I în browser
• Deschideți meniul browserului făcând clic dreapta și apoi accesând Inspectați
• Deschiderea opțiunilor Instrumentului pentru dezvoltatori din meniul browserului și accesarea Web Developer

Când găsiți un font care vă place, faceți clic dreapta pe textul care conține fontul pe care doriți să îl identificați și faceți clic pe Inspectați elementul.

Acest element va fi evidențiat în instrumentul inspector și veți vedea stilurile și machetele în casetele de lângă inspector.

Apoi, faceți clic pe fila Calculat și derulați în jos pentru a verifica câmpul Font-Family . Acest câmp ar trebui să enumere fontul site-ului web. De exemplu, în acest exemplu, fontul este Roboto sau SF-Pro Display.

În acest fel, puteți identifica fonturile de pe orice site web folosind instrumentul Inspector. Cu toate acestea, este posibil să găsiți site-uri în care nu puteți face clic dreapta sau nu puteți accesa instrumentul de inspecție deoarece nu o permit. Dacă este cazul, există o altă alternativă. De asemenea, puteți vedea ce font folosește site-ul cu un instrument dedicat.

Să aruncăm o privire la unele dintre cele mai bune plugin-uri pe care le puteți folosi pentru a identifica fonturile de pe un site web.

2) Identificați fonturile folosind instrumente și pluginuri

Dacă nu puteți utiliza instrumentul de inspecție pe un site web, identificați fonturile folosind instrumente și plugin-uri dedicate. Există mai multe instrumente, așa că, pentru a vă ușura viața, le vom enumera pe cele mai bune și vă vom arăta cum le puteți utiliza pentru a găsi și recunoaște fonturile utilizate pe diferite site-uri.

2.1) FFFFallBack

FFFFallback este un instrument simplu de bookmarklet pe care îl puteți folosi pentru a identifica fonturile de pe orice site web. Și cea mai bună parte este că nu trebuie să instalați nimic. Trebuie pur și simplu să salvați marcajul în fila de marcaje și să faceți clic pe Marcajul său de pe orice site pentru a verifica fonturile. Instrumentul folosește Javascript pentru a scana CSS-ul și a identifica tipografia, precum și stilul de font.

Pentru a utiliza acest instrument, trebuie să deschideți această pagină. Apoi, faceți clic pe butonul FFFFALLBACK și trageți -l în bara de marcaje, așa cum se arată mai jos. Dacă bara de Marcaje nu este afișată în browser, apăsați Ctrl+Shift+B pentru a o activa.

Acum, deschideți un site web unde doriți să identificați fonturile și faceți clic pe Bookmarklet pe care tocmai l-ați salvat în bara de Marcaje. Ar trebui să vă arate familia de fonturi și stilul site-ului pe o nouă coloană, așa cum se arată mai jos. Asigurați-vă că selectați Font Web ca opțiune de sus.

2.2) Izvorul

Fount este similar cu FFFFALLBACK, dar vă permite să verificați și fonturile anumitor texte. În acest fel, puteți specifica pentru ce texte doriți să verificați fonturile.

Pentru a utiliza Fount, accesați acest site și salvați Bookmarklet -ul de pe site-ul său, trăgându-l în fila dvs. Marcaje.

Apoi, deschideți orice site web pentru care doriți să verificați fonturile și faceți clic pe marcajul Font. Acest lucru vă va schimba cursorul într-un plus. Pur și simplu faceți clic pe orice text și vă va afișa fontul identificat în partea dreaptă sus a ecranului.

După ce cunoașteți fontul pentru textul respectiv, puteți face clic din nou pe caseta Font pentru a dezactiva cursorul și a continua să răsfoiți pagina dvs. ca de obicei.

2.3) Fontanello

Dacă preferați să utilizați extensii de browser, Fontanello este instrumentul perfect pentru a identifica fonturile de pe orice site web. Pur și simplu instalați extensia Fontanello pe Chrome sau Firefox și activați-o.

Pentru a identifica fonturile de pe un site, faceți clic dreapta pe orice text și selectați opțiunea Fontanello . Meniul derulant vă va afișa familia de fonturi, precum și stilul și variantele acesteia.

2.4) Ce font

Alternativ, puteți utiliza extensia WhatFont într-un mod similar. Mai întâi, instalați extensia fie pe Chrome, fie pe Firefox. Apoi, faceți clic pe pictograma instrumentului WhatFont din bara de instrumente a browserului dvs. și faceți clic pe orice text pentru a-i verifica fontul. Lucrul bun este că puteți selecta text diferit și puteți vedea ce tipografie folosesc simultan.

După ce ați terminat, apăsați pe Ieșire WhatFont pentru a închide ferestrele pop-up cu fonturi și pentru a utiliza pagina web ca de obicei.

Acum că am văzut cum să identificăm fonturile din text, s-ar putea să vă întrebați dacă este posibil să faceți același lucru din imagini. Raspunsul este da! Să vedem cum să facem asta.

Cum să identifici fonturile dintr-o imagine

Pe lângă descoperirea fonturilor din text, puteți identifica și fonturi de pe un site web prin intermediul imaginilor. Pentru a face asta, vom folosi un instrument online numit WhatTheFont .

Ce Font

Acest instrument online vă permite să încărcați orice imagine, să analizeze textul imaginii și să vă spună ce font folosește.

Pentru a face acest lucru, accesați această pagină și trageți sau încărcați imaginea în instrument (asigurați-vă că este în format JPG sau PNG.) Apoi, definiți caseta de decupare pentru text, iar instrumentul vă va arăta fontul corect al text. În plus, WhatTheFont vă oferă și site-uri web de unde puteți cumpăra fonturile și chiar vă permite să testați fonturile cu textul personalizat.

În acest fel, puteți verifica fonturile din imagini sau capturi de ecran. În plus, are o aplicație mobilă pe care o puteți utiliza și pentru a identifica fonturile de pe mobil.

Concluzie

Una peste alta, fontul pe care îl utilizați poate avea un impact mare asupra site-ului dvs. Vă poate ajuta să îmbunătățiți lizibilitatea, navigarea generală și să vă păstrați vizitatorii acolo mai mult timp. Claritatea și lizibilitatea sunt aspecte importante ale oricărui site și cu cât depui mai mult efort în el, cu atât vei avea rezultate mai bune.

În acest ghid, am văzut diferite moduri de a identifica fonturile de pe un site web:

• Folosind instrumentul Browser Inspect
• Utilizarea instrumentelor Bookmarklet
• Prin extensii de browser
• Utilizarea instrumentelor online dedicate pentru a identifica fonturile din imagini

Odată ce găsiți fonturile potrivite, rămâne la latitudinea dvs. să alegeți cum să le adăugați pe site-ul dvs. Odată ce ați ales tipografia pe care doriți să o utilizați, vă recomandăm să aruncați o privire la ghidul nostru despre cum să schimbați fontul în WordPress pentru a trece la noul font în cel mai scurt timp.

Dacă sunteți în căutarea mai multor modalități de a îmbunătăți lizibilitatea și navigarea pe site-ul dvs. WordPress, puteți, de asemenea, să aruncați o privire la aceste articole:

• Cum să adăugați pesmeturi în WordPress
• Organizați produsele WooCommerce după brand
• Cum să adăugați un mega meniu WordPress

Ați descoperit fonturi noi? Ce metoda ai folosit? Anunțați-ne în secțiunea de comentarii de mai jos!