FontLens

Gratis udvidelse til Chrome

Hvilken skrifttype er det? Højreklik og se CSS

Markér tekst på en vilkårlig webside, højreklik, og vælg ”Inspect font with FontLens”. En skrifttypeinspektør åbner oven på siden med familie, størrelse, vægt, linjehøjde og farve, CSS klar til kopiering og en knap til at hente skrifttypen.

Føj til Chrome — gratis

Virker også i Edge, Brave, Opera og andre Chromium-browsere.

FontLens-inspektør: Ag-prøven mellem versalhøjde, x-højde og grundlinje, skrifttypens egenskaber og et Tailwind-udsnit

Kort fortalt

Hvad den gør
Viser skrifttypen for den valgte tekst: familie, størrelse, vægt, linjehøjde, farve og andre typografiske værdier, der afviger fra standarden. CSS er klar til kopiering.
Sådan kommer du i gang
Markér tekst, højreklik, og vælg ”Inspect font with FontLens”. Menupunktet vises kun, når tekst er markeret.
Kopiér som
CSS, SCSS, SASS eller Tailwind med størrelsen i px, rem, pt eller em.
Skrifttypefil
”Download font” henter webskrifttypen fra dens @font-face-kilde. Tjek licensen, før du bruger den.
Hvem den er til
Webdesignere, frontendudviklere, tilgængelighedsrevisorer og studerende, der lærer CSS.
Pris
Gratis. Ingen konto og ingen betalingsversion.
Data
Kører i din browser. Ingen servere eller analyse. Den eneste anmodning er den skrifttypehentning, du starter.
Virker i
Chrome og andre Chromium-browsere, der kan installere fra Chrome Web Store. Ikke Firefox eller Safari.
Begrænsninger
Læser CSS for rigtig tekst på websider. Ikke tekst i billeder, canvas eller PDF-filer og ikke Chromes egne sider.
Version
2.2.0, opdateret 23. oktober 2026

To klik til skrifttypen

  1. 1

    Markér tekst

    En overskrift, et afsnit eller en knaptekst på en vilkårlig webside.

  2. 2

    Højreklik

    Vælg ”Inspect font with FontLens”. Inspektøren åbner oven på siden med familie, størrelse, vægt, linjehøjde og farve.

  3. 3

    Kopiér eller justér

    Kopiér CSS eller Tailwind, prøv en anden størrelse eller farve i livevisningen, eller hent skrifttypefilen.

Derfor åbner folk den

Aa

Find skrifttypens navn

Så du en overskrift, du kan lide? Markér den, og se familie, vægt og kilde: Google Fonts, Adobe Fonts eller selve websiden.

{ }

Match en mockup

Sammenlign værdierne på den aktive side med designfilen, og kopiér derefter reglerne som CSS, SCSS, SASS eller Tailwind.

4.5:1

Tjek kontrasten

Se kontrastforholdet med AA- og AAA-markeringer. Prøv mørkere tekst eller en lysere baggrund, før designet udgives.

Hvad den gør

  • Prøve med målelinjer

    Den første familie i stakken vises mellem versalhøjde, x-højde og grundlinje, målt ud fra selve skrifttypen.

  • udsnitsformater

    CSS, SCSS, SASS og Tailwind. Kopiér hele udsnittet eller en enkelt linje; dit seneste format huskes.

  • Dine enheder

    Vis størrelsen i px, rem, pt eller em i felterne og udsnittet. rem følger sidens egen rodstørrelse.

  • Skrifttypens kilde

    Et mærke viser, hvor skrifttypen kommer fra: Google Fonts, Adobe Fonts, webhostet eller et system, der allerede er på computeren.

  • Kontrasttjek

    Forholdet mellem tekst og baggrund med AA- og AAA-markeringer for normal og stor tekst. Markeringerne opdateres, når du ændrer farver.

  • Hent skrifttype

    Filen hentes fra @font-face-kilden og navngives efter familien. Hvis serveren blokerer den, åbnes kilden i en ny fane.

Hvorfor er skrifttypen svær at finde i DevTools?

En side angiver en liste over skrifttyper, og browseren bruger den første, den har. Vil du finde ud af hvilken, åbner du DevTools, finder elementet, læser Computed-panelet og leder derefter efter skrifttypefilen i Network-panelet. Størrelse, vægt, linjehøjde og farve ligger forskellige steder.

FontLens læser den beregnede stil for den valgte tekst og samler det hele i ét panel: familielisten, en prøve af den første familie, værdierne, skrifttypens kilde og CSS. Den læser sidens CSS og kan derfor ikke navngive en skrifttype i et billede.

Intet forlader din browser

  • Ingen konto eller servere

    FontLens kører i din browser. Ingen analyse eller sporing.

  • Læser det, du markerer

    Inspektøren læser stilen for den tekst, du højreklikkede på. Ingen oplysninger om siden sendes videre.

  • Fire tilladelser

    Kontekstmenu til højreklikspunktet, aktiv fane og sideadgang, så inspektøren kan åbnes, samt lagerplads til eksempeltekst, enhed og udsnitsformat.

Chrome DevTools sammenlignet med FontLens

Chrome DevTools sammenlignet med FontLensChrome DevToolsFontLens
Find skrifttypen for noget tekstUndersøg, find elementet, åbn Computed-paneletMarkér tekst, højreklik, vælg ét menupunkt
Kopiér som Tailwind eller SCSSNej, kopiér værdierne én ad gangenFanen CSS, SCSS, SASS eller Tailwind
Hvor skrifttypen kommer fraFind skrifttypefilen i Network-paneletEt mærke: Google Fonts, Adobe Fonts, webhostet eller system
Hent skrifttypefilenFind den i Network eller Sources, og gem denÉn knap
KontrasttjekI farvevælgeren i Styles-paneletAA- og AAA-markeringer ved siden af en livevisning
PrisIndbyggetGratis

Spørgsmål

Hvordan finder jeg ud af, hvilken skrifttype en hjemmeside bruger?

Føj FontLens til Chrome, markér tekst på siden, højreklik, og vælg ”Inspect font with FontLens”. Du ser familie, størrelse, vægt, linjehøjde, farve og skrifttypens kilde.

Hvordan kopierer jeg CSS for en skrifttype fra en hjemmeside?

Vælg fanen CSS, SCSS, SASS eller Tailwind i inspektøren, og tryk på ”Copy all”, eller kopiér en enkelt linje. Skift først enheden til px, rem, pt eller em, hvis du har brug for det.

Kan jeg hente en skrifttype fra en hjemmeside?

Når teksten bruger en webskrifttype, henter ”Download font” filen fra dens @font-face-kilde. En systemskrifttype har ingen fil at hente. Tjek licensen, før du bruger den i dit projekt.

Kan FontLens identificere en skrifttype i et billede eller en PDF?

Nej. Den læser CSS for rigtig tekst på websider og kan ikke navngive skrifttyper i billeder, canvas eller PDF-filer.

Hvordan tjekker jeg tekstkontrast efter WCAG?

Forhåndsvisningen viser kontrastforholdet mellem tekstfarve og baggrund med AA- og AAA-markeringer for normal og stor tekst. Skift en af farverne, så opdateres markeringerne.

Kan den vise størrelser i rem i stedet for px?

Ja. Skift enheden til px, rem, pt eller em, så følger felterne og udsnittet med. rem beregnes ud fra sidens rodskriftstørrelse, og dit valg huskes.

Er den gratis? Indsamler den data?

Den er gratis og kræver ingen konto. Ingen servere eller analyse; den eneste anmodning er den skrifttypehentning, du starter.

Virker den i Edge, Brave eller Opera?

De fleste Chromium-browsere kan installere udvidelser fra Chrome Web Store, herunder Edge, Brave, Opera og Vivaldi. Firefox og Safari understøttes ikke.

Flere gratis udvidelser fra PYROCTAL

Hvilken skrifttype er det? To klik.

Føj til Chrome — gratis