FontLens

Kiendelezi cha bure kwa Chrome

Hii ni fonti gani? Bofya kulia uone CSS

Chagua maandishi kwenye tovuti yoyote, bofya kulia kisha uchague “Inspect font with FontLens”. Kikagua fonti hufunguka juu ya ukurasa na kuonyesha familia ya fonti, ukubwa, uzito, line-height na rangi. Nakili CSS au pakua fonti hapo hapo.

Ongeza kwenye Chrome — bure

Pia inafanya kazi kwenye Edge, Brave, Opera na vivinjari vingine vya Chromium.

Kikagua cha FontLens: sampuli ya Ag kati ya miongozo ya cap-height, x-height na baseline, sifa za fonti na kipande cha Tailwind

Kwa muhtasari

Hufanya nini
Huonyesha fonti ya maandishi uliyochagua: familia, ukubwa, uzito, line-height, rangi na mitindo mingine inayotofautiana na chaguomsingi, tayari kunakiliwa kama CSS.
Jinsi ya kuanza
Chagua maandishi, bofya kulia kisha uchague “Inspect font with FontLens”. Kipengee cha menyu huonekana tu maandishi yanapochaguliwa.
Nakili kama
CSS, SCSS, SASS au Tailwind, huku ukubwa ukiwa px, rem, pt au em.
Faili ya fonti
“Download font” hupata fonti ya wavuti kutoka chanzo chake cha @font-face. Kagua leseni ya fonti kabla ya kuitumia.
Ni kwa ajili ya nani
Wabunifu wa wavuti, watengenezaji wa front-end, wakaguzi wa ufikivu na wanafunzi wanaojifunza CSS.
Bei
Bure. Hakuna akaunti, hakuna toleo la kulipia.
Data
Hufanya kazi kwenye kivinjari chako. Hakuna seva wala takwimu. Ombi pekee la mtandao ni upakuaji wa fonti unaoanzisha.
Hufanya kazi kwenye
Chrome na vivinjari vingine vya Chromium vinavyosakinisha kutoka Chrome Web Store. Si Firefox wala Safari.
Vikwazo
Husoma CSS ya maandishi halisi kwenye tovuti. Si maandishi kwenye picha, canvases au PDFs, wala kurasa za Chrome yenyewe.
Toleo
2.2.0, imesasishwa 23 Oktoba 2026

Hatua mbili hadi kwenye fonti

  1. 1

    Chagua maandishi

    Kichwa, aya au maandishi ya kitufe kwenye ukurasa wowote wa wavuti.

  2. 2

    Bofya kulia

    Chagua “Inspect font with FontLens”. Kikagua hufunguka juu ya ukurasa na kuonyesha familia, ukubwa, uzito, line-height na rangi.

  3. 3

    Nakili au rekebisha

    Nakili CSS au Tailwind, jaribu ukubwa au rangi nyingine kwenye onyesho la moja kwa moja, au pakua faili ya fonti.

Kwa nini watu huitumia

Aa

Tambua jina la fonti

Umeona kichwa unachopenda? Kichague uone familia ya fonti, uzito na chanzo chake: Google Fonts, Adobe Fonts au tovuti yenyewe.

{ }

Linganisha na mchoro

Linganisha vipimo vya ukurasa wa moja kwa moja na faili ya muundo, kisha nakili kanuni kama CSS, SCSS, SASS au Tailwind.

4.5:1

Kagua utofauti

Angalia uwiano wa utofauti na alama za AA na AAA. Jaribu maandishi meusi zaidi au mandharinyuma mepesi zaidi kabla ya kukamilisha muundo.

Hufanya nini

  • Sampuli yenye miongozo

    Familia ya kwanza kwenye orodha ya fonti, ikionyeshwa kati ya miongozo ya cap-height, x-height na baseline inayopimwa kutoka kwenye fonti yenyewe.

  • Miundo ya kipande cha msimbo

    CSS, SCSS, SASS na Tailwind. Nakili kipande kizima au mstari mmoja; muundo uliotumia mwisho hukumbukwa.

  • Vipimo vyako

    Onyesha ukubwa kwa px, rem, pt au em kwenye sehemu na kipande cha msimbo. rem hufuata ukubwa wa msingi wa ukurasa.

  • Chanzo cha fonti

    Beji huonyesha fonti imetoka wapi: Google Fonts, Adobe Fonts, mwenyeji wa tovuti au fonti ya mfumo iliyo tayari kwenye kompyuta yako.

  • Kagua utofauti

    Uwiano kati ya maandishi na mandharinyuma wenye alama za AA na AAA kwa maandishi ya kawaida na makubwa; husasishwa unapobadilisha rangi.

  • Pakua fonti

    Huchukua faili kutoka chanzo cha @font-face na kuiita kwa jina la familia ya fonti. Seva ikizuia upakuaji, chanzo hufunguka kwenye kichupo kipya.

Kwa nini kupata fonti kwenye DevTools huchukua muda?

Ukurasa hutaja orodha ya fonti, kisha kivinjari hutumia ya kwanza inayopatikana. Ili kujua ni ipi, unafungua DevTools, unatafuta kipengele, unasoma paneli ya Computed, kisha unatafuta faili ya fonti kwenye paneli ya Network. Ukubwa, uzito, line-height na rangi ziko sehemu tofauti.

FontLens husoma mtindo uliokokotolewa wa maandishi uliyochagua na kuweka yote kwenye paneli moja: orodha ya familia, sampuli ya familia ya kwanza, vipimo, chanzo cha fonti na CSS. Husoma CSS ya ukurasa, kwa hiyo haiwezi kutambua fonti iliyo ndani ya picha.

Hakuna kinachoondoka kwenye kivinjari chako

  • Hakuna akaunti wala seva

    FontLens hufanya kazi kwenye kivinjari chako. Hakuna takwimu wala ufuatiliaji.

  • Husoma ulichochagua

    Kikagua husoma mitindo ya maandishi uliyobofya kulia. Hakuna taarifa ya ukurasa inayotumwa popote.

  • Ruhusa nne

    Menyu ya muktadha kwa kipengee cha kubofya kulia, kichupo kinachotumika na ufikiaji wa ukurasa ili kikagua kifunguke, pamoja na hifadhi ya maandishi ya sampuli, kipimo na muundo wa kipande cha msimbo.

Chrome DevTools dhidi ya FontLens

Chrome DevTools dhidi ya FontLensChrome DevToolsFontLens
Pata fonti ya maandishiKagua, tafuta kipengele, fungua paneli ya ComputedChagua maandishi, bofya kulia, kipengee kimoja cha menyu
Nakili kama Tailwind au SCSSHapana, nakili thamani moja baada ya nyingineKichupo cha CSS, SCSS, SASS au Tailwind
Chanzo cha fontiTafuta faili ya fonti kwenye paneli ya NetworkBeji: Google Fonts, Adobe Fonts, mwenyeji wa tovuti au mfumo
Pakua faili ya fontiItake kwenye Network au Sources kisha uihifadhiKitufe kimoja
Kagua utofautiKwenye kichagua rangi cha paneli ya StylesAlama za AA na AAA kando ya onyesho la moja kwa moja
BeiImejengewa ndaniBure

Maswali

Ninawezaje kujua tovuti inatumia fonti gani?

Ongeza FontLens kwenye Chrome, chagua maandishi kwenye tovuti, bofya kulia kisha uchague “Inspect font with FontLens”. Utaona familia ya fonti, ukubwa, uzito, line-height, rangi na chanzo chake.

Ninakili vipi CSS ya fonti kutoka kwenye tovuti?

Kwenye kikagua chagua kichupo cha CSS, SCSS, SASS au Tailwind kisha ubonyeze “Copy all”, au nakili mstari mmoja. Badilisha kipimo kuwa px, rem, pt au em kwanza ukihitaji.

Je, ninaweza kupakua fonti kutoka kwenye tovuti?

Maandishi yakitumia fonti ya wavuti, “Download font” huchukua faili kutoka chanzo chake cha @font-face. Fonti ya mfumo haina faili ya kupakua. Kagua leseni ya fonti kabla ya kuitumia kwenye mradi wako.

Je, FontLens hutambua fonti kwenye picha au PDF?

Hapana. Husoma CSS ya maandishi halisi kwenye tovuti, kwa hiyo haiwezi kutambua fonti kwenye picha, canvases au PDFs.

Ninaangaliaje utofauti wa maandishi kwa WCAG?

Onyesho huonyesha uwiano wa utofauti kati ya rangi ya maandishi na mandharinyuma, pamoja na alama za AA na AAA kwa maandishi ya kawaida na makubwa. Ukibadilisha rangi yoyote, alama husasishwa.

Je, inaweza kuonyesha ukubwa kwa rem badala ya px?

Ndiyo. Badilisha kipimo kuwa px, rem, pt au em; sehemu na kipande cha msimbo hufuata chaguo hilo. rem hukokotolewa kutoka ukubwa wa msingi wa fonti wa ukurasa, na chaguo lako hukumbukwa.

Je, ni bure? Hukusanya data?

Ni bure na haihitaji akaunti. Haina seva wala takwimu; ombi pekee la mtandao ni upakuaji wa fonti unaoanzisha.

Je, inafanya kazi kwenye Edge, Brave au Opera?

Vivinjari vingi vya Chromium husakinisha viendelezi kutoka Chrome Web Store, vikiwemo Edge, Brave, Opera na Vivaldi. Firefox na Safari hazitumiki.

Viendelezi vingine vya bure kutoka PYROCTAL

Hii ni fonti gani? Hatua mbili tu.

Ongeza kwenye Chrome — bure