Hur du hittar en webbsides teckensnitt med hjälp av verktyget Inspektera element och webbläsartillägg

Framgången för din webbplats beror mycket på dess utseende. Att ha rätt färgkombination och tema håller dina besökare på din webbplats lite längre. Förutom din webbplats färgpalett och struktur spelar teckensnittet du väljer också en viktig roll för att hålla din publik engagerad.

Du kanske stöter på en tilltalande webbplats när du surfar på webben och vill veta vilka teckensnitt den använder. Med online-tillägg och din webbläsares inbyggda verktyg för inspekteringselement är det snabbt och enkelt att identifiera teckensnitt.

Om du inte visste det, låter webbläsarens inbyggda Inspect Element-verktyg dig granska en webbplats källkod. Du kan förstå designelementen på en webbplats genom att titta på dess CSS, HTML och annan information. Det är ett utmärkt sätt att få inspiration när du utformar din egen webbplats.

Processen att identifiera ett teckensnitt med hjälp av verktyget Inspektera element är ganska enkelt och du behöver ingen kodningsförmåga. Det här verktyget finns tillgängligt i alla webbläsare på marknaden och alla har en liknande layout.

Så här identifierar du ett teckensnitt med hjälp av webbläsarens inspekteringsverktyg.

1. Öppna webbplatsen du vill använda.
2. Markera texten som har teckensnittet du vill identifiera och högerklicka på den.
3. Klicka på Inspektera från snabbmenyn.
4. När inspekteringsmenyn öppnas, klicka på Beräknad.
5. Bläddra ner för att hitta Typsnittsfamilj sektion. Här hittar du typsnittets namn och stil samt dess dimensioner.

Om du vill ha ett snabbare sätt att hitta en webbplats teckensnitt med hjälp av verktyget Inspektera, prova istället:

1. Öppna webbplatsen du vill använda.
2. Tryck Ctrl + Skift + C (Cmd + Skift + C på Mac).
3. Håll muspekaren över texten för att visa typsnitt, storlek, färgkod och marginal.

Du kan också kontrollera listan över teckensnitt som används på en webbsida med verktyget Inspektera. Så här gör du:

1. Gå till webbsidan.
2. Öppna källkoden genom att trycka på Ctrl + Skift + I (Cmd + Skift + I på Mac).
3. Klicka på Nätverk fliken och välj sedan Font flik.
4. Här ser du en lista över alla teckensnitt som används på webbsidan.

För att få en lista över alla teckensnitt i realtid kan du behöva uppdatera webbsidan.

Relaterad: Hur man ökar eller minskar teckenstorlek i Firefox

Hur man identifierar teckensnitt med hjälp av webbläsartillägg

Om du vill ha ett bekvämare sätt att identifiera ett teckensnitt kanske du vill installera ett webbläsartillägg för teckensnittssökning. Även om det finns flera webbläsartillägg som kan hjälpa till att upptäcka teckensnitt på webben, är de två mest populära WhatFont och Font Finder.

Låt oss ta en titt på processen för att identifiera teckensnitt med båda tilläggen.

1. WhatFont

WhatFont är mycket populärt för att snabbt upptäcka flera teckensnitt samtidigt. Så här använder du det här verktyget.

1. När WhatFont är aktiverat i din webbläsare, håll muspekaren över texten för att visa dess teckensnitt.
2. När du klickar på texten visas ett popup-fönster med resten av teckensnittsinformationen, till exempel teckensnittsstorlek, färg och stil.
3. Dessutom kan du välja flera textavsnitt samtidigt för att jämföra olika teckensnitt på samma sida.

Ladda ner: WhatFont för Krom | Firefox | Safari (Fri)

2. Font Finder

Font Finder visar också teckensnittsinformation när du håller muspekaren över text på en webbplats. Det ger dock många tekniska detaljer, så det kan bli lite förvirrande om du inte känner till webbdesign.

Med det sagt är Font Finder mer lämpligt för webbutvecklare som vill ersätta befintliga teckensnitt med nya i realtid. Detta gör det enkelt att testa teckensnitt innan du gör några permanenta ändringar.

Så här testar du ett teckensnitt med Font Finder:

1. Markera en del text från webbsidan.
2. Högerklicka på den och välj Font Finder från snabbmenyn.
3. Välj Byt teckensnitt med och ange teckensnittsnamnet. Låt oss lägga till Calibri och se hur det ändrar teckensnittet i förhandsgranskningen.
4. Uppdatera sidan om du vill återställa teckensnittet.

Ladda ner: FontFinder för Krom | Kant | Firefox (Fri)

Vad sägs om att kontrollera teckensnittet i en bild?

Om du vill identifiera teckensnitt i en bild kanske webbläsartillägg och webbläsarens inspekteringsverktyg inte hjälper. Du kan dock prova online bildinspektörverktyg som WhatFontIs, FontSquirrel, Typspring, WhatTheFont, och många andra.

Processen för att identifiera ett teckensnitt från en bild är i stort sett densamma i alla verktyg. Låt oss försöka identifiera teckensnittet i en bild med WhatTheFont.

1. Om du inte redan har gjort det, ladda ner bilden du vill använda.
2. Importera bilden till WhatTheFont.
3. WhatTheFont kommer automatiskt att upptäcka texten i din bild. Krymp eller förstora beskärningsrutan så att den omger teckensnittet du vill identifiera. Slå pilknappen när det är färdigt.
4. WhatTheFont matchar sedan teckensnittet i bilden med teckensnitt i sitt galleri och visar dig närbesläktade teckensnitt.
5. Om du inte hittar en bra match direkt kan du fortsätta klicka Visa fler resultat för att se fler relaterade teckensnitt.

Relaterad: Bästa gratis teckensnittswebbplatser för gratis teckensnitt online

Upptäck teckensnitt från webben och använd dem i dina mönster

Teckensnitt spelar en viktig roll för framgången för en webbplats eller en grafisk design. Om du snubblar på ett engagerande typsnitt när du surfar på nätet kan du enkelt upptäcka det med metoderna ovan.

WhatTheFont och 4 alternativ för att hitta typsnitt från bilder

Vill du hitta typsnitt från bilder? Det finns verktyg online som kan göra det åt dig, inklusive WhatTheFont och olika alternativ.

Läs Nästa

Om författaren