← Tilbake til funksjoner
Free

Vis alle skrifttyper

Vis alle skrifttyper scanner en webside og præsenterer en komplet oversigt over alle skrifttypefamilier i brug — webskrifttyper indlæst fra CDN'er, selvhostede skrifttyper og systemskrifttype-fallbacks. Hver skrifttype viser en live tekst-forhåndsvisning, de indlæste vægte og stilarter, antallet af elementer, der bruger den, og et-klik-kopiering af CSS-skrifttypefamilie-erklæringen.

At identificere skrifttyper på et websted du beundrer, plejede at kræve inspektion af elementer et for et i DevTools, kontrol af den beregnede font-family-egenskab eller brug af browserudvidelser, der kun registrerer én skrifttype ad gangen. Vis alle skrifttyper giver dig det komplette billede i én visning — alle skrifttyper indlæst og brugt på siden med live tekstprøver, der viser præcis, hvordan hver skrifttype gengives. Værktøjet skelner mellem webskrifttyper (indlæst via @font-face eller Google Fonts) og systemskrifttyper (Arial, Helvetica, Georgia osv.) og viser den komplette font-family-stak. For hver skrifttype ser du, hvilke vægte der er indlæst (400, 600, 700), hvilke elementer der bruger den og hvilke skriftstørrelser der er anvendt. Klik på en skrifttype for at kopiere dens CSS-erklæring — klar til at indsætte i dit eget projekt.

Live forhåndsvisning
example.com
4 fonts found on page
Click any font to copy its CSS declaration
Jost 400, 600, 700 · 24 elements
The quick brown fox jumps over the lazy dog
Georgia 400, 700 · 8 elements
The quick brown fox jumps over the lazy dog
Consolas 400 · 3 elements
The quick brown fox jumps over the lazy dog
system-ui 400 · 2 elements (fallback)
The quick brown fox jumps over the lazy dog
Hovedfunksjoner

Komplet skrifttypeoversigt

Viser alle font-family faktisk gengivet på siden, herunder webskrifttyper fra Google Fonts, Adobe Fonts eller brugerdefinerede @font-face-erklæringer og systemskrifttype-fallbacks. Viser det samlede antal unikke skrifttypefamilier fundet.

Live tekst-forhåndsvisninger

Hver skrifttype vises med en live tekstprøve gengivet ved hjælp af den faktiske skrifttype-fil indlæst på siden. Du ser rigtig gengivelse — ikke en generisk forhåndsvisning.

Vægt- og stildetaljer

For hver skrifttype, se hvilke vægte der er indlæst (Regular 400, Medium 500, SemiBold 600, Bold 700) og om kursive varianter er tilgængelige. Hjælper dig med at forstå skrifttypens indlæste delmængde.

Brugsstatistik

Se, hvor mange elementer på siden der bruger hver skrifttype. Den mest brugte skrifttype vises først. Kend, hvilke skrifttyper er primære (brødtekst) og hvilke er sekundære (brugt på blot få elementer).

Et-klik CSS-kopiering

Klik på en skrifttypepost for at kopiere dens komplette CSS font-family-erklæring til din udklipsholder. Klar til at indsætte direkte i dit stylesheet.

Skrifttypekilde-identifikation

Hver skrifttype viser sin kilde: Google Fonts (med den specifikke URL), Adobe Fonts, selvhostet (med @font-face URL'en) eller systemskrifttype. Kend præcis, hvorfra hver skrifttype kommer.

Vanlige bruksområder

Identificering af skrifttyper på websteder du beundrer

Besøg et websted med smuk typografi og se øjeblikkeligt alle skrifttyper, det bruger — navne, vægte og hvorfra de kommer. Aldrig mere hvad er det for en skrifttype? -gætteri eller brug af upålidelige skrifttype-identifikationsværktøjer.

Skrifttypeaudit til ydeevne

Hvor mange skrifttyper indlæser din side? Er der ubrugte skrifttyper, der downloades men ikke anvendes? Vis alle skrifttyper viser faktisk brug — hvis en indlæst skrifttype har 0 elementer, der bruger den, er det spildt båndbredde.

Designsystem-dokumentation

Dokumentér dit projekts typografi ved at køre Vis alle skrifttyper på hver side. Verificer at de korrekte skrifttyper og vægte bruges konsekvent på tværs af stedet — fang useriøse font-family-erklæringer.

Find skrifttype-alternativer

Identificerede du en skrifttype du kan lide, men den er en betalt skrifttype? Kopiér skrifttypenavnet og søg efter gratis alternativer med lignende karakteristika. Live-forhåndsvisningen hjælper dig med at huske præcis, hvordan det så ud.

Cross-browser skrifttype-verificering

Kør Vis alle skrifttyper på den samme side i forskellige browsere for at verificere, at de samme skrifttyper gengives overalt. Systemskrifttype-stakke opløses forskelligt på tværs af operativsystemer — fang inkonsistenser.

Slik bruker du det
1

Aktiver Vis alle skrifttyper

Åbn den flydende DevSuite Pro-dock, og klik på Vis alle skrifttyper-ikonet. Værktøjet scanner sidens beregnede stilarter og @font-face-regler.

2

Gennemse skrifttypelisten

Et panel viser alle skrifttyper fundet på siden, sorteret efter brugsfrekvens. Hver post viser skrifttypenavnet, forhåndsvisnings-tekst, vægte og elementtæller.

3

Forhåndsvis og sammenlign

Rul gennem live-forhåndsvisningerne for at se, hvordan hver skrifttype gengives. Sammenlign sidens overskriftsskrifttype vs. brødtekstskrifttype vs. accentskrifttype.

4

Kopiér skrifttypeerklæringer

Klik på en skrifttypepost for at kopiere dens font-family CSS-erklæring. Klik på kildelinket for at besøge skrifttypens oprindelse (Google Fonts-side, CDN-URL osv.).

5

Brug i dit projekt

Indsæt font-family-erklæringen i din CSS og indlæs skrifttypen fra den samme kilde for at bruge den i dit eget projekt.

Klar til å prøve? Vis alle skrifttyper?

Installer DevSuite Pro gratis og lås opp 39+ utviklerverktøy for nettleseren din.

Legg til i Chrome Legg til i Edge Legg til i FireFox