FontLens

Bezmaksas paplašinājums pārlūkam Chrome

Kas tas par fontu? Noklikšķiniet ar labo pogu un skatiet CSS

Atlasiet tekstu jebkurā vietnē, noklikšķiniet ar labo pogu un izvēlieties „Inspect font with FontLens”. Inspektors atvērsies virs lapas un parādīs fontu saimi, izmēru, biezumu, rindas augstumu un krāsu. CSS būs gatavs kopēšanai, bet poga „Download font” ļaus lejupielādēt fontu.

Pievienot pārlūkam Chrome — bezmaksas

Darbojas arī Edge, Brave, Opera un citos Chromium pārlūkos.

FontLens inspektors: paraugs Ag starp cap-height, x-height un baseline līnijām, fonta īpašības un Tailwind koda fragments

Īsumā

Ko tas dara
Parāda atlasītā teksta fontu: saimi, izmēru, biezumu, rindas augstumu, krāsu un stilus, kas atšķiras no noklusējuma, ar kopēšanai gatavu CSS.
Kā sākt
Atlasiet tekstu, noklikšķiniet ar labo pogu un izvēlieties „Inspect font with FontLens”. Izvēlne parādās tikai tad, ja teksts ir atlasīts.
Kopēt kā
CSS, SCSS, SASS vai Tailwind, izmēru norādot px, rem, pt vai em.
Fonta fails
„Download font” iegūst tīmekļa fontu no tā @font-face avota. Pirms lietošanas pārbaudiet fonta licenci.
Kam tas paredzēts
Tīmekļa dizaineriem, front-end izstrādātājiem, piekļūstamības auditoriem un studentiem, kas apgūst CSS.
Cena
Bezmaksas. Nav nepieciešams konts, nav maksas versijas.
Dati
Darbojas jūsu pārlūkā. Nav serveru un analītikas. Vienīgais pieprasījums ir jūsu sākta fonta lejupielāde.
Darbojas
Chrome un citos Chromium pārlūkos, kuros var instalēt paplašinājumus no Chrome Web Store. Firefox un Safari netiek atbalstīti.
Ierobežojumi
Nolasa tīmekļa lapu īsta teksta CSS. Neatpazīst tekstu attēlos, canvas elementos vai PDF failos, kā arī Chrome lapās.
Versija
2.2.0, atjaunināts 2026. gada 23. oktobris

Divi klikšķi līdz fontam

  1. 1

    Atlasiet tekstu

    Virsraksts, rindkopa vai pogas teksts jebkurā tīmekļa lapā.

  2. 2

    Noklikšķiniet ar labo pogu

    Izvēlieties „Inspect font with FontLens”. Inspektors atvērsies virs lapas un parādīs saimi, izmēru, biezumu, rindas augstumu un krāsu.

  3. 3

    Kopējiet vai pielāgojiet

    Kopējiet CSS vai Tailwind, izmēģiniet citu izmēru vai krāsu tiešraides priekšskatījumā vai lejupielādējiet fonta failu.

Kāpēc to izmanto

Aa

Nosakiet fonta nosaukumu

Ieraudzījāt virsrakstu, kas jums patīk? Atlasiet to un uzziniet saimi, biezumu un fonta avotu: Google Fonts, Adobe Fonts vai pašu vietni.

{ }

Salīdziniet ar maketu

Salīdziniet vērtības vietnē ar dizaina failu, pēc tam kopējiet noteikumus kā CSS, SCSS, SASS vai Tailwind.

4.5:1

Pārbaudiet kontrastu

Apskatiet kontrasta attiecību un AA, AAA atzīmes, tad pirms dizaina publicēšanas izmēģiniet tumšāku tekstu vai gaišāku fonu.

Ko tas dara

  • Paraugs ar vadlīnijām

    Pirmā saime fontu stekā ir attēlota starp cap-height, x-height un baseline vadlīnijām, kas mērītas pašā fontā.

  • koda fragmentu formāti

    CSS, SCSS, SASS un Tailwind. Kopējiet visu fragmentu vai vienu rindu; pēdējais izmantotais formāts tiek saglabāts.

  • Jūsu mērvienības

    Rādiet izmēru px, rem, pt vai em laukos un koda fragmentā. rem seko lapas saknes izmēram.

  • Fonta avots

    Atzīme parāda fonta avotu: Google Fonts, Adobe Fonts, paša mitināts vai datorā instalēts sistēmas fonts.

  • Kontrasta pārbaude

    Teksta un fona attiecība ar AA un AAA atzīmēm parastam un lielam tekstam; tā tiek atjaunināta, mainot krāsas.

  • Lejupielādēt fontu

    Iegūst failu no @font-face avota un nosauc to pēc saimes. Ja serveris bloķē lejupielādi, avots tiek atvērts jaunā cilnē.

Kāpēc fonta atrašana DevTools aizņem tik ilgu laiku?

Lapa norāda fontu sarakstu, un pārlūks izmanto pirmo pieejamo. Lai noskaidrotu, kurš tas ir, atveriet DevTools, atrodiet elementu, apskatiet Computed paneli un pēc tam meklējiet fonta failu Network panelī. Izmērs, biezums, rindas augstums un krāsa atrodas dažādās vietās.

FontLens nolasa atlasītā teksta aprēķināto stilu un parāda vienā panelī fontu saimes, pirmās saimes paraugu, vērtības, fonta avotu un CSS. Tas nolasa lapas CSS, tāpēc nevar noteikt attēlā redzamu fontu.

Nekas nepamet jūsu pārlūku

  • Nav konta, nav serveru

    FontLens darbojas jūsu pārlūkā. Nav analītikas un izsekošanas.

  • Nolasa atlasīto tekstu

    Inspektors nolasa teksta stilus, uz kura noklikšķinājāt ar labo pogu. Nekāda informācija par lapu netiek nosūtīta.

  • Četras atļaujas

    Konteksta izvēlne labās pogas vienumam, aktīvās cilnes un lapas piekļuve inspektora atvēršanai, kā arī krātuve parauga tekstam, mērvienībai un koda fragmenta formātam.

Chrome DevTools un FontLens

Chrome DevTools un FontLensChrome DevToolsFontLens
Atrast teksta fontuPārbaudiet elementu un atveriet Computed paneliAtlasiet tekstu, noklikšķiniet ar labo pogu, izvēlieties izvēlnes vienumu
Kopēt kā Tailwind vai SCSSNē, vērtības jākopē pa vienaiCSS, SCSS, SASS vai Tailwind cilne
Fonta avotsMeklējiet fonta failu Network panelīAtzīme: Google Fonts, Adobe Fonts, paša mitināts vai sistēmas fonts
Lejupielādēt fonta failuAtrodiet to Network vai Sources panelī un saglabājietViena poga
Kontrasta pārbaudeStyles paneļa krāsu atlasītājāAA un AAA atzīmes blakus tiešraides priekšskatījumam
CenaIebūvētsBezmaksas

Jautājumi

Kā uzzināt, kādu fontu izmanto vietne?

Pievienojiet FontLens pārlūkam Chrome, atlasiet tekstu vietnē, noklikšķiniet ar labo pogu un izvēlieties „Inspect font with FontLens”. Redzēsiet fontu saimi, izmēru, biezumu, rindas augstumu, krāsu un fonta avotu.

Kā nokopēt vietnes fonta CSS?

Inspektorā izvēlieties CSS, SCSS, SASS vai Tailwind cilni un nospiediet „Copy all” vai nokopējiet vienu rindu. Ja nepieciešams, vispirms pārslēdziet mērvienību uz px, rem, pt vai em.

Vai varu lejupielādēt fontu no vietnes?

Ja tekstā izmantots tīmekļa fonts, „Download font” iegūst failu no @font-face avota. Sistēmas fontam nav lejupielādējama faila. Pirms izmantošanas savā projektā pārbaudiet licenci.

Vai FontLens var noteikt attēlā vai PDF failā redzamu fontu?

Nē. Tas nolasa tīmekļa lapu īsta teksta CSS, tāpēc nevar noteikt fontus attēlos, canvas elementos vai PDF failos.

Kā pārbaudīt teksta kontrastu atbilstoši WCAG?

Priekšskatījumā redzama teksta krāsas un fona kontrasta attiecība ar AA un AAA atzīmēm parastam un lielam tekstam. Mainiet jebkuru krāsu, un atzīmes tiks atjauninātas.

Vai izmērus var rādīt rem, nevis px?

Jā. Izvēlieties px, rem, pt vai em, un lauki un koda fragments tiks atjaunināti. rem tiek aprēķināts no lapas saknes fonta lieluma, un jūsu izvēle tiek saglabāta.

Vai tas ir bezmaksas? Vai tas vāc datus?

Tas ir bezmaksas, un konts nav vajadzīgs. Nav serveru vai analītikas; vienīgais pieprasījums tiek veikts, kad sākat fonta lejupielādi.

Vai tas darbojas Edge, Brave vai Opera?

Lielākā daļa Chromium pārlūku, tostarp Edge, Brave, Opera un Vivaldi, var instalēt paplašinājumus no Chrome Web Store. Firefox un Safari netiek atbalstīti.

Vairāk bezmaksas paplašinājumu no PYROCTAL

Kas tas par fontu? Divi klikšķi.

Pievienot pārlūkam Chrome — bez maksas