FontLens

Libreng extension para sa Chrome

Anong font ito? I-right-click at tingnan ang CSS

Pumili ng text sa kahit anong website, i-right-click, at piliin ang Inspect font with FontLens. Bubukas sa ibabaw ng page ang font inspector, na may family, laki, kapal, line-height, kulay, CSS na puwedeng kopyahin, at button para i-download ang font.

Idagdag sa Chrome — libre

Gumagana rin sa Edge, Brave, Opera at iba pang Chromium browser.

FontLens inspector: sample na Ag sa pagitan ng cap-height, x-height at baseline guide, mga katangian ng font, at Tailwind snippet

Sa isang tingin

Ginagawa nito
Ipinapakita ang font ng pinili mong text: family, laki, kapal, line-height, kulay, at iba pang style na naiiba sa default, kasama ang CSS na puwedeng kopyahin.
Paano magsimula
Pumili ng text, i-right-click, at piliin ang Inspect font with FontLens. Lalabas lang ang menu kapag may napiling text.
Kopyahin bilang
CSS, SCSS, SASS, o Tailwind, na may sukat na px, rem, pt, o em.
Font file
Kinukuha ng Download font ang web font mula sa @font-face source nito. Suriin ang lisensya ng font bago ito gamitin.
Para kanino
Mga web designer, front-end developer, accessibility auditor, at nag-aaral ng CSS.
Presyo
Libre. Walang account at walang bayad na bersyon.
Data
Tumatakbo sa browser mo. Walang server o analytics. Ang tanging request ay ang font download na sinimulan mo.
Gumagana sa
Chrome at iba pang Chromium browser na nag-i-install mula sa Chrome Web Store. Hindi suportado ang Firefox o Safari.
Mga limitasyon
Binabasa ang CSS ng totoong text sa web page. Hindi nito nababasa ang text sa larawan, canvas, PDF o mga sariling page ng Chrome.
Bersyon
2.2.0, na-update noong Oktubre 23, 2026

Dalawang click para makita ang font

  1. 1

    Pumili ng text

    Heading, talata o label ng button sa kahit anong web page.

  2. 2

    I-right-click

    Piliin ang Inspect font with FontLens. Bubukas ang inspector sa ibabaw ng page at ipapakita ang family, laki, kapal, line-height, at kulay.

  3. 3

    Kopyahin o baguhin

    Kopyahin ang CSS o Tailwind, subukan ang ibang laki o kulay sa live preview, o i-download ang font file.

Bakit ito ginagamit ng mga tao

Aa

Alamin ang typeface

May headline kang nagustuhan? Piliin ito para makita ang family, kapal, at pinagmulan ng font: Google Fonts, Adobe Fonts o mismong site.

{ }

Itugma sa mockup

Ihambing ang mga value sa live page sa design file, saka kopyahin ang mga rule bilang CSS, SCSS, SASS o Tailwind.

4.5:1

Suriin ang contrast

Tingnan ang contrast ratio at AA at AAA mark, at subukan ang mas madilim na text o mas maliwanag na background bago ilabas ang design.

Mga ginagawa nito

  • Sample na may guide

    Ang unang family sa stack, ipinapakita sa pagitan ng cap-height, x-height at baseline guide na sinusukat mula mismo sa font.

  • format ng snippet

    CSS, SCSS, SASS at Tailwind. Kopyahin ang buong snippet o isang linya; tatandaan ang huli mong format.

  • Mga unit mo

    Ipakita ang laki sa px, rem, pt o em sa mga field at snippet. Sumusunod ang rem sa root size ng page.

  • Pinagmulan ng font

    Ipinapakita ng badge kung saan galing ang font: Google Fonts, Adobe Fonts, sariling hosting o system font sa computer mo.

  • Suriin ang contrast

    Ratio ng text at background na may AA at AAA mark para sa regular at malaking text; nag-a-update kapag binago ang kulay.

  • Download font

    Kinukuha ang file mula sa @font-face source at pinapangalanan ayon sa family. Kung harangin ito ng server, bubuksan ang source sa bagong tab.

Bakit matagal hanapin ang font sa DevTools

Naglalagay ang page ng listahan ng mga font at ginagamit ng browser ang unang mayroon ito. Para malaman kung alin iyon, buksan ang DevTools, hanapin ang element, tingnan ang Computed panel, saka hanapin ang font file sa Network panel. Magkakahiwalay ang laki, kapal, line-height at kulay.

Binabasa ng FontLens ang computed style ng pinili mong text at inilalagay ang lahat sa iisang panel: family stack, sample ng unang family, mga value, pinagmulan ng font at CSS. CSS ng page ang binabasa nito kaya hindi nito matutukoy ang font sa larawan.

Walang lumalabas sa browser mo

  • Walang account o server

    Tumatakbo ang FontLens sa browser mo. Walang analytics o tracking.

  • Ang pinili mo lang ang binabasa

    Binabasa ng inspector ang style ng text na ini-right-click mo. Walang impormasyon tungkol sa page na ipinapadala saanman.

  • Apat na pahintulot

    Context menu para sa right-click item, active tab at access sa page para mabuksan ang inspector, at storage para sa sample text, unit at snippet format.

Chrome DevTools kumpara sa FontLens

Chrome DevTools kumpara sa FontLensChrome DevToolsFontLens
Tingnan ang font ng textSiyasatin, hanapin ang element, buksan ang Computed panelPumili ng text, i-right-click, isang menu item
Kopyahin bilang Tailwind o SCSSHindi, kopyahin ang mga value nang paisa-isaCSS, SCSS, SASS o Tailwind tab
Pinagmulan ng fontHanapin ang font file sa Network panelBadge: Google Fonts, Adobe Fonts, sariling hosting o system
I-download ang font fileHanapin sa Network o Sources at i-saveIsang button
Suriin ang contrastSa color picker ng Styles panelAA at AAA mark sa tabi ng live preview
PresyoKasama naLibre

Mga Tanong

Paano ko malalaman kung anong font ang gamit ng website?

Idagdag ang FontLens sa Chrome, pumili ng text sa site, i-right-click at piliin ang Inspect font with FontLens. Makikita mo ang font family, laki, kapal, line-height, kulay at pinagmulan nito.

Paano ko kokopyahin ang CSS ng font mula sa website?

Sa inspector, piliin ang CSS, SCSS, SASS o Tailwind tab at pindutin ang Copy all, o kopyahin ang isang linya. Palitan muna ang unit sa px, rem, pt o em kung kailangan.

Puwede ba akong mag-download ng font mula sa website?

Kung web font ang gamit ng text, kinukuha ng Download font ang file mula sa @font-face source nito. Walang mada-download na system font. Suriin ang lisensya bago gamitin ito sa proyekto mo.

Nakikilala ba ng FontLens ang font sa larawan o PDF?

Hindi. Binabasa nito ang CSS ng totoong text sa web page kaya hindi nito matutukoy ang font sa larawan, canvas o PDF.

Paano ko susuriin ang text contrast para sa WCAG?

Ipinapakita ng preview ang contrast ratio ng kulay ng text at background, kasama ang AA at AAA mark para sa regular at malaking text. Baguhin ang alinmang kulay para mag-update ang mga mark.

Puwede bang ipakita ang sukat sa rem sa halip na px?

Oo. Palitan ang unit sa px, rem, pt o em at susunod dito ang mga field at snippet. Kinukuwenta ang rem mula sa root font size ng page at tatandaan ang pinili mo.

Libre ba ito? Nangongolekta ba ito ng data?

Libre ito at walang account. Walang server o analytics; ang tanging request ay ang font download na sinimulan mo.

Gumagana ba ito sa Edge, Brave o Opera?

Karamihan sa mga Chromium browser ay puwedeng mag-install ng extension mula sa Chrome Web Store, kabilang ang Edge, Brave, Opera at Vivaldi. Hindi suportado ang Firefox at Safari.

Iba pang libreng extension mula sa PYROCTAL

Anong font iyon? Dalawang click lang.

Idagdag sa Chrome — libre