Het lettertype van een webpagina vinden met behulp van de inspecteer Element Tool en browserextensies

verschillende lettertypen verschillende lettertypen verschillende lettertypen verschillende lettertypen

het succes van uw website hangt sterk af van het uiterlijk. Het hebben van de juiste kleurencombinatie en thema zal uw bezoekers op uw site te houden voor een beetje langer. Naast het kleurenpalet en de structuur van uw site, speelt het lettertype dat u kiest ook een essentiële rol bij het houden van uw publiek betrokken.

misschien komt u een aantrekkelijke site tegen tijdens het surfen op het web, en u wilt weten welke lettertypen het gebruikt. Met online extensies en uw browser ingebouwde inspecteer Element tool, het identificeren van een lettertype is snel en eenvoudig.

lettertypen vinden met behulp van het inspecteer Element Gereedschap

indien u dit niet wist, kunt u met het ingebouwde inspecteer Element gereedschap van uw browser de broncode van een website bekijken. U kunt de ontwerpelementen van een site begrijpen door te kijken naar de CSS, HTML en andere informatie. Het is een geweldige manier om inspiratie op te doen bij het ontwerpen van uw eigen site.

het proces om een lettertype te identificeren met behulp van het inspecteer Element gereedschap is vrij eenvoudig, en je hebt geen coderingsvaardigheden nodig. Deze tool is beschikbaar in alle browsers op de markt, en elk heeft een soortgelijke lay-out.

hier ziet u hoe u een lettertype identificeert met behulp van het inspecteer-gereedschap van uw browser.

  1. Open de website die u wilt gebruiken.
  2. markeer de tekst met het lettertype dat u wilt identificeren en klik er met de rechtermuisknop op.
  3. klik op inspecteren vanuit het contextmenu.
    browser inspecteer optie geopend
  4. wanneer het menu inspecteren wordt geopend, klikt u op de berekende.
  5. Scroll naar beneden om de sectie Font-Family te vinden. Hier vindt u de naam van het lettertype en de stijl, evenals de afmetingen.
    Browser-Inspector Openen met broncode die de lettertypefamilie toont

andere manieren om het inspecteren Gereedschap

te gebruiken als u een snellere manier wilt om het lettertype van een site te vinden met het inspecteren Gereedschap, probeer dan dit:

  1. Open de website die u wilt gebruiken.
  2. druk op Ctrl + Shift + C (Cmd + Shift + C op Mac).
  3. plaats de muisaanwijzer op de tekst om het lettertype, de grootte, De kleurcode en de marge weer te geven.
    dialoogvenster met Lettertypedetails van een tekst in Chrome

u kunt ook de lijst van lettertypen die worden gebruikt op een webpagina met behulp van de inspecteer tool. Hier is hoe dit te doen:

  1. Ga naar de webpagina.
  2. Open de broncode door op Ctrl + Shift + I (Cmd + Shift + I op Mac) te drukken.
  3. klik op het tabblad Netwerk en selecteer vervolgens het tabblad Lettertype.
  4. hier ziet u een lijst van alle lettertypen die op de webpagina worden gebruikt.
    lijst van lettertypen gebruikt op de website getoond in Chrome Browser Inspector

om de lijst van alle lettertypen in real-time te krijgen, moet u mogelijk de webpagina vernieuwen.

Hoe kunt u lettertypen identificeren met behulp van browserextensies

als u een handigere manier wilt om een lettertype te identificeren, kunt u een browserextensie voor het vinden van lettertypen installeren. Hoewel er verschillende browser-extensies die kunnen helpen bij het detecteren van lettertypen op het web, de twee meest populaire zijn WhatFont en Font Finder.

laten we eens kijken naar het proces van het identificeren van lettertypen met behulp van beide extensies.

WhatFont

WhatFont is populair voor het snel detecteren van meerdere lettertypen tegelijk. Hier is hoe u deze tool te gebruiken.

  1. als WhatFont is ingeschakeld in uw browser, ga dan met de muis over de tekst om het lettertype te tonen.
    WhatFont toont lettertypenaam boven tekst
  2. zodra u op de tekst klikt, verschijnt er een pop-upvenster met de rest van de lettertypedetails, zoals de lettergrootte, kleur en stijl.
    WhatFont toont Lettertypedetails voor een tekst
  3. Daarnaast kunt u meerdere secties tegelijk selecteren om verschillende lettertypen op dezelfde pagina te vergelijken.
    WhatFont Toont Meerdere Lettertypedetails Tegelijkertijd

Downloaden: WhatFont voor Chrome / Firefox / Safari (Gratis)

Font Finder

Font Finder geeft ook lettertypedetails weer wanneer u met de muisaanwijzer over tekst op een website gaat. Echter, het biedt veel technische details, dus het kan een beetje verwarrend als je niet bekend bent met webdesign.

Font Finder-Plugin die diepgaande Lettertypedetails toont

Dat gezegd hebbende, Font Finder is meer geschikt voor webontwikkelaars die willen bestaande lettertypen te vervangen door nieuwe in real-time. Dit maakt het gemakkelijk om lettertypen uit te testen voordat u permanente wijzigingen aanbrengt.

zo kunt u een lettertype testen met Font Finder:

  1. Markeer een gedeelte van de tekst van de webpagina.
  2. klik er met de rechtermuisknop op en selecteer Font Finder in het contextmenu.
    vervang lettertype door Font Finder-Plugin
  3. Selecteer vervang lettertype door en voer de naam van het lettertype in. Laten we Calibri toevoegen en zien hoe het het lettertype verandert in de preview.
    het lettertype wijzigen in Calibri met Font Finder
  4. als u het lettertype opnieuw wilt instellen, vernieuw dan de pagina.
    lettertype gewijzigd in Calibri

Download: FontFinder voor Chrome / Edge / Firefox (Gratis)

hoe zit het met het controleren van het lettertype in een afbeelding?

als u de lettertypen in een afbeelding wilt identificeren, helpen browserextensies en het Inspecteerprogramma van uw browser mogelijk niet. Echter, u kunt proberen online image inspector tools zoals WhatFontIs, FontSquirrel, Fontspring, WhatTheFont, en vele anderen.

het proces voor het identificeren van een lettertype uit een afbeelding is grotendeels hetzelfde in alle hulpmiddelen. Laten we proberen om het lettertype in een afbeelding te identificeren met WhatTheFont.

  1. als u dat nog niet hebt gedaan, download dan de afbeelding die u wilt gebruiken.
  2. de afbeelding importeren in WhatTheFont.
    what Thefont Image Font Detection Box
  3. WhatTheFont detecteert automatisch de tekst in uw afbeelding. Het bijsnijkader verkleinen of vergroten zodat het het lettertype omringt dat u wilt identificeren. Druk op de pijlknop als u klaar bent.
    een afbeelding toevoegen aan WhatTheFont
  4. WhatTheFont zal dan overeenkomen met het lettertype in de afbeelding met lettertypen in de galerij, en zal u nauw verwante lettertypen tonen.
    what Theefont die gerelateerde lettertypen toont
  5. als u niet meteen een goede match vindt, kunt u blijven klikken Toon meer resultaten om meer gerelateerde lettertypen te zien.
    Toon meer resultaten in WhatTheFont

Detecteer lettertypen van het Web en gebruik ze in uw ontwerpen

lettertypen spelen een belangrijke rol in het succes van een website of een grafisch ontwerp. Als u struikelt over een boeiende lettertype tijdens het surfen op het web, kunt u gemakkelijk detecteren met behulp van de bovenstaande methoden.

Shan Abdul (107 artikelen gepubliceerd)

Shan Abdul is ingenieur. Na het afronden van zijn afstuderen en MS, hij is begonnen met zijn carrière als freelance schrijver. Hij schrijft over het gebruik van verschillende tools en software om mensen te helpen productiever te zijn als student of professional. In zijn vrije tijd kijkt hij graag naar Youtube-video ‘ s over productiviteit.

Meer Uit Shan Abdul

Leave a Reply

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.