FontLens

Ilmainen laajennus Chromelle

Mikä fontti tämä on? Napsauta hiiren oikealla ja katso CSS

Valitse teksti millä tahansa verkkosivulla, napsauta hiiren oikealla ja valitse ”Inspect font with FontLens”. Sivun päälle avautuva fonttitarkastelu näyttää fonttiperheen, koon, lihavoinnin, rivikorkeuden ja värin, kopioitavan CSS:n sekä painikkeen fontin lataamiseen.

Lisää Chromeen – ilmainen

Toimii myös selaimilla Edge, Brave, Opera ja muilla Chromium-selaimilla.

FontLens-tarkastelu: Ag-näyte versaali-, x-korkeus- ja peruslinjaviivojen välissä, fontin ominaisuudet ja Tailwind-katkelma

Pähkinänkuoressa

Mitä se tekee
Näyttää valitsemasi tekstin fontin: perheen, koon, lihavoinnin, rivikorkeuden, värin ja muut oletuksesta poikkeavat tyylit. CSS on valmiina kopioitavaksi.
Näin aloitat
Valitse teksti, napsauta hiiren oikealla ja valitse ”Inspect font with FontLens”. Valikkokohta näkyy vain, kun tekstiä on valittu.
Kopiointimuodot
CSS, SCSS, SASS tai Tailwind; koko yksiköissä px, rem, pt tai em.
Fonttitiedosto
”Download font” hakee verkkofontin sen @font-face-lähteestä. Tarkista fontin lisenssi ennen käyttöä.
Kenelle
Verkkosuunnittelijoille, käyttöliittymäkehittäjille, saavutettavuuden auditoijille ja CSS:ää opiskeleville.
Hinta
Ilmainen. Ei tiliä eikä maksullista versiota.
Tiedot
Toimii selaimessasi. Ei palvelimia eikä analytiikkaa. Ainoa verkkopyyntö on käynnistämäsi fontin lataus.
Toimii selaimissa
Chrome ja muut Chromium-selaimet, joihin voi asentaa laajennuksia Chrome Web Storesta. Ei Firefox eikä Safari.
Rajoitukset
Lukee verkkosivujen oikean tekstin CSS:n. Ei kuvien, canvas-elementtien tai PDF-tiedostojen tekstiä eikä Chromen omia sivuja.
Version
2.2.0, päivitetty 23. lokakuuta 2026

Fontti löytyy kahdella napsautuksella

  1. 1

    Valitse teksti

    Otsikko, kappale tai painikkeen teksti millä tahansa verkkosivulla.

  2. 2

    Napsauta hiiren oikealla

    Valitse ”Inspect font with FontLens”. Sivun päälle avautuva tarkastelu näyttää perheen, koon, lihavoinnin, rivikorkeuden ja värin.

  3. 3

    Kopioi tai säädä

    Kopioi CSS tai Tailwind, kokeile toista kokoa tai väriä esikatselussa tai lataa fonttitiedosto.

Miksi sitä käytetään

Aa

Selvitä fontin nimi

Pidätkö otsikon fontista? Valitse se ja katso perhe, lihavointi ja lähde: Google Fonts, Adobe Fonts tai itse sivusto.

{ }

Sovita malliin

Vertaa sivun arvoja suunnittelutiedostoon ja kopioi säännöt CSS-, SCSS-, SASS- tai Tailwind-muodossa.

4.5:1

Tarkista kontrasti

Tarkista kontrastisuhde ja AA- sekä AAA-merkinnät. Kokeile tummempaa tekstiä tai vaaleampaa taustaa ennen julkaisua.

Mitä se tekee

  • Näyte mittaviivoilla

    Fonttipinon ensimmäinen perhe piirretään versaali-, x-korkeus- ja peruslinjaviivojen väliin fontista mitattujen arvojen mukaan.

  • katkelmamuotoa

    CSS, SCSS, SASS ja Tailwind. Kopioi koko katkelma tai yksi rivi; viimeisin muoto muistetaan.

  • Omat yksikkösi

    Näytä koko px-, rem-, pt- tai em-yksikkönä kentissä ja katkelmassa. rem noudattaa sivun juurifonttikokoa.

  • Fontin lähde

    Tunniste kertoo fontin lähteen: Google Fonts, Adobe Fonts, itse ylläpidetty tai tietokoneeseen asennettu järjestelmäfontti.

  • Kontrastin tarkistus

    Tekstin ja taustan kontrastisuhde AA- ja AAA-merkinnöillä tavalliselle ja suurelle tekstille. Merkinnät päivittyvät värien muuttuessa.

  • Lataa fontti

    Tiedosto haetaan @font-face-lähteestä ja nimetään perheen mukaan. Jos palvelin estää latauksen, lähde avautuu uuteen välilehteen.

Miksi ”mikä fontti tämä on?” vie aikaa DevToolsissa

Sivu määrittää fonttilistan, ja selain käyttää ensimmäistä saatavilla olevaa. Selvittääksesi minkä, avaat DevToolsin, etsit elementin, tarkistat Computed-paneelin ja etsit fonttitiedostoa Network-paneelista. Koko, lihavointi, rivikorkeus ja väri löytyvät eri paikoista.

FontLens lukee valitsemasi tekstin lasketun tyylin ja kokoaa samaan paneeliin fonttipinon, ensimmäisen perheen näytteen, arvot, fontin lähteen ja CSS:n. Se lukee sivun CSS:ää, joten se ei voi tunnistaa kuvassa olevaa fonttia.

Mitään ei lähetetä selaimesta

  • Ei tiliä eikä palvelimia

    FontLens toimii selaimessasi. Ei analytiikkaa eikä seurantaa.

  • Lukee valitsemasi tekstin

    Tarkastelu lukee hiiren oikealla napsauttamasi tekstin tyylit. Mitään sivulta ei lähetetä eteenpäin.

  • Neljä käyttöoikeutta

    Kontekstivalikko hiiren oikean painikkeen toiminnolle, aktiivinen välilehti ja sivun käyttö tarkastelun avaamiseen sekä tallennustila näytetekstille, yksikölle ja katkelmamuodolle.

Chrome DevTools ja FontLens

Chrome DevTools ja FontLensChrome DevToolsFontLens
Tekstin fontin selvittäminenTarkista elementti ja avaa Computed-paneeliValitse teksti, napsauta oikealla ja valitse valikkokohta
Kopiointi Tailwind- tai SCSS-muodossaEi, kopioi arvot yksitellenCSS-, SCSS-, SASS- tai Tailwind-välilehti
Fontin lähteen selvittäminenEtsi fonttitiedosto Network-paneelistaTunniste: Google Fonts, Adobe Fonts, itse ylläpidetty tai järjestelmä
Fonttitiedoston lataaminenEtsi tiedosto Network- tai Sources-paneelista ja tallennaYksi painike
Kontrastin tarkistusStyles-paneelin värivalitsimessaAA- ja AAA-merkinnät reaaliaikaisen esikatselun vieressä
HintaSisäänrakennettuIlmainen

Kysymyksiä

Miten saan selville, mitä fonttia verkkosivusto käyttää?

Lisää FontLens Chromeen, valitse sivulta teksti, napsauta hiiren oikealla ja valitse ”Inspect font with FontLens”. Näet fonttiperheen, koon, lihavoinnin, rivikorkeuden, värin ja fontin lähteen.

Miten kopioin verkkosivun fontin CSS:n?

Valitse tarkastelussa CSS-, SCSS-, SASS- tai Tailwind-välilehti ja paina ”Copy all” tai kopioi yksittäinen rivi. Vaihda tarvittaessa yksiköksi px, rem, pt tai em.

Voinko ladata fontin verkkosivustolta?

Kun tekstissä käytetään verkkofonttia, ”Download font” hakee tiedoston @font-face-lähteestä. Järjestelmäfonttia ei voi ladata. Tarkista lisenssi ennen käyttöä omassa projektissasi.

Tunnistaako FontLens fontin kuvasta tai PDF-tiedostosta?

Ei. Se lukee verkkosivujen oikean tekstin CSS:ää eikä voi nimetä kuvissa, canvas-elementeissä tai PDF-tiedostoissa olevia fontteja.

Miten tarkistan tekstin kontrastin WCAG:n mukaan?

Esikatselu näyttää tekstin ja taustan värien kontrastisuhteen sekä AA- ja AAA-merkinnät tavalliselle ja suurelle tekstille. Muuta kumpaa tahansa väriä, niin merkinnät päivittyvät.

Voiko koot näyttää rem-yksikkönä px:n sijaan?

Kyllä. Vaihda yksiköksi px, rem, pt tai em, niin kentät ja katkelma päivittyvät. rem lasketaan sivun juurifonttikoosta, ja valintasi muistetaan.

Onko se ilmainen? Kerääkö se tietoja?

Se on ilmainen eikä vaadi tiliä. Palvelimia tai analytiikkaa ei ole; ainoa verkkopyyntö on käynnistämäsi fontin lataus.

Toimiiko se Edgessä, Bravessa tai Operassa?

Useimpiin Chromium-selaimiin voi asentaa laajennuksia Chrome Web Storesta, myös Edgeen, Braveen, Operaan ja Vivaldiin. Firefoxia ja Safaria ei tueta.

Lisää ilmaisia laajennuksia PYROCTALilta

Mikä fontti tämä on? Kaksi napsautusta.

Lisää Chromeen – ilmainen