FontLens

Nemokamas plėtinys Chrome naršyklei

Koks tai šriftas? Spustelėkite dešiniuoju pelės mygtuku ir pamatykite CSS

Pasirinkite tekstą bet kurioje svetainėje, spustelėkite jį dešiniuoju pelės mygtuku ir pasirinkite „Inspect font with FontLens“. Virš puslapio atsidarys šriftų inspektorius su šeima, dydžiu, storiu, eilutės aukščiu ir spalva, paruoštu kopijuoti CSS bei mygtuku šriftui atsisiųsti.

Pridėti į Chrome – nemokamai

Taip pat veikia Edge, Brave, Opera ir kitose Chromium naršyklėse.

FontLens inspektorius: Ag pavyzdys tarp didžiųjų raidžių aukščio, x aukščio ir bazinės linijos gairių, šrifto savybės ir Tailwind fragmentas

Trumpai

Ką daro
Parodo pasirinkto teksto šriftą: šeimą, dydį, storį, eilutės aukštį, spalvą ir kitus nuo numatytųjų besiskiriančius stilius. CSS paruoštas kopijuoti.
Kaip pradėti
Pasirinkite tekstą, spustelėkite dešiniuoju pelės mygtuku ir pasirinkite „Inspect font with FontLens“. Meniu punktas rodomas tik pasirinkus tekstą.
Kopijavimo formatai
CSS, SCSS, SASS arba Tailwind; dydis pateikiamas px, rem, pt arba em.
Šrifto failas
„Download font“ gauna žiniatinklio šriftą iš jo @font-face šaltinio. Prieš naudodami patikrinkite šrifto licenciją.
Kam skirta
Žiniatinklio dizaineriams, sąsajų kūrėjams, prieinamumo tikrintojams ir CSS besimokantiems studentams.
Kaina
Nemokama. Nereikia paskyros, nėra mokamos versijos.
Duomenys
Veikia jūsų naršyklėje. Nėra serverių ar analitikos. Vienintelė užklausa – jūsų inicijuotas šrifto atsisiuntimas.
Veikia
Chrome ir kitose Chromium naršyklėse, kuriose galima įdiegti iš Chrome Web Store. Ne Firefox ar Safari.
Ribojimai
Nuskaito tikrų tinklalapių tekstų CSS. Ne tekstą paveikslėliuose, drobėse ar PDF failuose ir ne pačiuose Chrome puslapiuose.
Version
2.2.0, atnaujinta 2026 m. spalio 23 d.

Du spustelėjimai iki šrifto

  1. 1

    Pasirinkite tekstą

    Antraštę, pastraipą arba mygtuko užrašą bet kuriame tinklalapyje.

  2. 2

    Spustelėkite dešiniuoju pelės mygtuku

    Pasirinkite „Inspect font with FontLens“. Virš puslapio atsidarys inspektorius su šeima, dydžiu, storiu, eilutės aukščiu ir spalva.

  3. 3

    Kopijuokite arba koreguokite

    Kopijuokite CSS arba Tailwind, išbandykite kitą dydį ar spalvą tiesioginėje peržiūroje arba atsisiųskite šrifto failą.

Kodėl žmonės jį atidaro

Aa

Sužinokite šrifto pavadinimą

Patiko antraštės šriftas? Pasirinkite ją ir peržiūrėkite šeimą, storį bei šaltinį: Google Fonts, Adobe Fonts ar pačią svetainę.

{ }

Suderinkite maketą

Palyginkite veikiančio puslapio reikšmes su dizaino failu, tada nukopijuokite taisykles kaip CSS, SCSS, SASS arba Tailwind.

4.5:1

Patikrinkite kontrastą

Peržiūrėkite kontrasto santykį ir AA bei AAA žymas. Prieš patvirtindami dizainą išbandykite tamsesnį tekstą arba šviesesnį foną.

Ką jis daro

  • Pavyzdys su gairėmis

    Pirmoji šriftų rinkinio šeima pavaizduota tarp didžiųjų raidžių aukščio, x aukščio ir bazinės linijos gairių, išmatuotų pagal patį šriftą.

  • fragmentų formatai

    CSS, SCSS, SASS ir Tailwind. Kopijuokite visą fragmentą arba vieną eilutę; paskutinis formatas įsimenamas.

  • Jūsų vienetai

    Rodykite dydį px, rem, pt arba em laukeliuose ir fragmente. rem atsižvelgia į puslapio šakninį dydį.

  • Šrifto šaltinis

    Žyma nurodo šrifto šaltinį: Google Fonts, Adobe Fonts, svetainę arba kompiuteryje įdiegtą sistemos šriftą.

  • Kontrasto tikrinimas

    Teksto ir fono kontrasto santykis su AA bei AAA žymomis įprastam ir dideliam tekstui. Žymos atnaujinamos keičiant spalvas.

  • Atsisiųskite šriftą

    Failas gaunamas iš @font-face šaltinio ir pavadinamas pagal šeimą. Jei serveris jį blokuoja, šaltinis atidaromas naujame skirtuke.

Kodėl DevTools taip ilgai ieškoti „koks čia šriftas?“

Puslapis nurodo šriftų sąrašą, o naršyklė naudoja pirmą turimą. Norėdami sužinoti kurį, atidarykite DevTools, raskite elementą, peržiūrėkite Computed skydelį, tada ieškokite šrifto failo Network skydelyje. Dydis, storis, eilutės aukštis ir spalva pateikti skirtingose vietose.

FontLens nuskaito pasirinkto teksto apskaičiuotą stilių ir pateikia viename skydelyje: šriftų šeimų seką, pirmosios šeimos pavyzdį, reikšmes, šrifto šaltinį ir CSS. Jis skaito puslapio CSS, todėl negali nustatyti paveikslėlyje esančio šrifto.

Niekas neišeina iš naršyklės

  • Be paskyros ir serverių

    FontLens veikia jūsų naršyklėje. Jokios analitikos ar sekimo.

  • Nuskaito jūsų pasirinktą tekstą

    Inspektorius nuskaito teksto, kurį spustelėjote dešiniuoju pelės mygtuku, stilius. Jokia puslapio informacija niekur nesiunčiama.

  • Keturi leidimai

    Kontekstinis meniu dešiniojo mygtuko veiksmui, aktyvus skirtukas ir puslapio prieiga inspektoriui atverti, saugykla pavyzdiniam tekstui, vienetams ir fragmento formatui.

Chrome DevTools ir FontLens

Chrome DevTools ir FontLensChrome DevToolsFontLens
Kaip rasti teksto šriftąApžiūrėkite, raskite elementą ir atverkite Computed skydelįPasirinkite tekstą, dešiniuoju pelės mygtuku, vienas meniu punktas
Kopijavimas kaip Tailwind arba SCSSNe, reikšmes kopijuokite po vienąCSS, SCSS, SASS arba Tailwind skirtukas
Šrifto šaltinisIeškokite šrifto failo Network skydelyjeŽyma: Google Fonts, Adobe Fonts, svetainė arba sistema
Šrifto failo atsisiuntimasRaskite jį Network arba Sources skydelyje ir išsaugokiteVienas mygtukas
Kontrasto tikrinimasStyles skydelio spalvų parinkiklyjeAA ir AAA žymos šalia tiesioginės peržiūros
KainaIntegruotaNemokama

Klausimai

Kaip sužinoti, kokį šriftą naudoja svetainė?

Pridėkite FontLens prie Chrome, pasirinkite tekstą svetainėje, spustelėkite dešiniuoju pelės mygtuku ir pasirinkite „Inspect font with FontLens“. Matysite šeimą, dydį, storį, eilutės aukštį, spalvą ir šrifto šaltinį.

Kaip nukopijuoti svetainės šrifto CSS?

Inspektoriuje pasirinkite CSS, SCSS, SASS arba Tailwind skirtuką ir spauskite „Copy all“ arba kopijuokite vieną eilutę. Jei reikia, pirmiausia pakeiskite vienetą į px, rem, pt arba em.

Ar galiu atsisiųsti šriftą iš svetainės?

Kai tekste naudojamas žiniatinklio šriftas, „Download font“ gauna failą iš @font-face šaltinio. Sisteminio šrifto atsisiųsti negalima. Prieš naudodami savo projekte patikrinkite licenciją.

Ar FontLens atpažįsta šriftą paveikslėlyje arba PDF faile?

Ne. Jis skaito tikrų tinklalapių tekstų CSS, todėl negali nustatyti šriftų paveikslėliuose, drobėse ar PDF failuose.

Kaip patikrinti teksto kontrastą pagal WCAG?

Peržiūroje rodomas teksto ir fono spalvų kontrasto santykis bei AA ir AAA žymos įprastam ir dideliam tekstui. Pakeiskite bet kurią spalvą, kad žymos atsinaujintų.

Ar galiu rodyti dydžius rem, o ne px?

Taip. Perjunkite vienetą į px, rem, pt arba em – laukeliai ir fragmentas prisitaikys. rem apskaičiuojamas pagal puslapio šakninį šrifto dydį, o jūsų pasirinkimas įsimenamas.

Ar plėtinys nemokamas? Ar renka duomenis?

Jis nemokamas ir nereikalauja paskyros. Nėra serverių ar analitikos; vienintelė užklausa – jūsų pradėtas šrifto atsisiuntimas.

Ar veikia Edge, Brave arba Opera?

Dauguma Chromium naršyklių leidžia įdiegti plėtinius iš Chrome Web Store, įskaitant Edge, Brave, Opera ir Vivaldi. Firefox ir Safari nepalaikomos.

Daugiau nemokamų plėtinių iš PYROCTAL

Koks čia šriftas? Du spustelėjimai.

Pridėti į Chrome – nemokamai