FontLens

Pumili ng anumang teksto, mag-right-click, at agad na suriin ang font, laki, bigat, kulay at CSS nito — kopyahin, i-tweak,…

Nakapunta ka na ba sa isang pahina, humanga sa pagkasulat, at nagtanong na "anong font ito?" Sinasagot iyan ng FontLens sa isang pag-click. Pumili ng anumang teksto sa anumang website, mag-right-click, at piliin ang "Inspeksyonin ang font gamit ang FontLens." Isang malinis at nakatuong panel ang bubukas sa ibabaw ng pahina at ibubunyag nang eksakto kung paano ito na-istilo: ang typeface, laki, bigat, taas ng linya, kulay, at bawat iba pang detalye sa likod ng disenyo. Ikaw man ay isang taga-disenyo na nagre-reverse-engineer ng isang layout, isang developer na tumutugma sa isang spec, o simpleng curious sa isang magandang headline, ginagawa ng tool na ito ang anumang web page na isang bukas na aklat ng tipograpiya. Ang FontLens (Inspeksyonin ang Font) ay isang tagahanap ng font at inspektor ng CSS na pinagsama sa isa. Hindi lang nito pangalanan ang pamilya ng font para sa iyo, binibigyan ka nito ng handa-gamiting code, isang interactive na laruan upang subukan ang mga ideya, at mga tool sa accessibility upang matiyak na nababasa ang iyong teksto. Walang account. Walang pagpaparehistro. Piliin lang, mag-right-click, at suriin. 🔍 Ano ang maaari mong gawin - Ipakita ang buong tipograpiya ng anumang napiling salita: pamilya ng font, laki ng font, bigat ng font, taas ng linya, at ang kulay sa isang sulyap - Tingnan ang karagdagang styling na madaling makaligtaan, tulad ng letter-spacing, text-transform, at font-style - Kopyahin ang anumang solong property sa isang pag-click, o kunin ang buong rule set bilang isang buong CSS snippet - I-convert ang snippet na iyon sa Tailwind, SCSS, o SASS sa pamamagitan ng simpleng tab, pagkatapos ay kopyahin bilang buo o linya sa bawat linya - Mag-eksperimento sa isang live, mae-edit na preview: muling isulat ang mga sample na salita, baguhin ang mga halaga, palitan ang background, at panoorin itong mag-update kaagad - Tukuyin kung saan nagmumula ang isang web font gamit ang badge ng provider (Google Fonts, Adobe Fonts, self-hosted, o isang built-in na sistema ng typeface) - I-save ang isang web font sa iyong computer gamit ang button na "I-download ang font," na direktang kinuha mula sa sarili nitong pinagmulan - Suriin ang contrast ng kulay laban sa mga pamantayan ng WCAG, na may eksaktong ratio at mga resulta ng AA at AAA pass o fail - Pumili at kumuha ng sample ng mga kulay gamit ang isang buong tagapili, kabilang ang isang eyedropper upang makuha ang anumang pixel sa screen - Palitan ang mga yunit ng pagsukat sa pagitan ng px, rem, pt, at em, na inilapat sa parehong mga field at sa nai-export na code 🖱️ Paano ito gumagana Ang paggamit ng FontLens ay tumatagal ng segundo. I-highlight ang mga salita na gusto mong pag-aralan, i-right-click sa napili, at piliin ang "Inspeksyonin ang font gamit ang FontLens" mula sa menu. Ang panel ay lilitaw sa ibabaw ng kasalukuyang pahina, maayos na na-istilo upang hindi ito kailanman magbanggaan sa hitsura ng site. Mula doon maaari mong basahin ang mga detalye, kopyahin ang kailangan mo, o magsimulang mag-edit. Masaya ang live na preview. Baguhin ang mga salita upang subukan ang isang tunay na headline, baguhin ang laki, ayusin ang bigat, o magtakda ng bagong kulay ng background upang makita kung paano gumagana ang uri. Nanatili ang iyong mga pag-edit habang naglilipat ka ng pahina at bumalik sa ibang pagkakataon, kaya ang isang ideya na sinimulan mo sa isang site ay naghihintay para sa iyo sa susunod. Kapag gusto mo na ang orihinal na halaga, ibinabalik ng button na "I-reset sa site" ang lahat na talagang ginagamit ng pahina. Kailangan mo ng raw asset? Para sa isang nai-download na web font, kinukuha ng isang button ang totoong file mula sa lokasyon ng @font-face nito. Para sa isang typeface na kasama na ang iyong operating system, sinasabi sa iyo ng FontLens na ito ay isang built-in na font, kaya alam mong available ito nang walang anumang pag-download. 🔒 Una ang privacy Ang FontLens ay ganap na tumatakbo sa loob ng iyong browser. Walang pagkolekta ng data, walang pagsubaybay, walang analytics, at walang panlabas na server na kasangkot sa pagsusuri ng teksto. Lahat ng iyong sinusuri ay nananatili sa iyong makina. Gumagawa ang extension ng eksaktong isang network request, at kapag pinindot mo lang nang sadyang ang "I-download ang font," kung saan ito kumukuha sa sariling pinagmulan ng font na iyon upang kunin ang file. Walang ibang umalis sa iyong device. Sadyang limitado ang mga pahintulot. Idinadagdag ng pahintulot sa context-menu ang entry sa right-click. Pinapayagan ng pahintulot sa active-tab ang tool na basahin ang teksto na iyong pinili sa tab kung saan mo ito ginamit, at wala nang iba. Sini-save ng storage ang iyong preview text at ang iyong unit at format na mga kagustuhan upang maalala ang mga ito sa susunod. Walang malawak na access sa iyong kasaysayan ng pagba-browse at walang malawakang pahintulot ng host. 👥 Para kanino ito - Mga web designer na gustong tukuyin ang isang typeface, kunin ang isang palette, at muling gamitin ang mga estilo nang mabilis - Mga front-end developer na nagtutugma ng isang mockup o kumukuha ng eksaktong font-family at spacing values sa code - Mga UI at UX engineer na bumubuo ng pare-pareho at on-brand na mga sistema ng uri - Mga mag-aaral na nag-aaral ng CSS at tipograpiya na gustong makita kung paano binuo ang mga tunay na site - Mga auditor ng accessibility na nagpapatunay na ang teksto ay nakakatugon sa mga kinakailangan sa contrast ng WCAG bago ilabas - Mga blogger, marketer, at curious na mambabasa na gustong malaman lang kung anong font ang ginagamit ng isang site ✨ Bakit ito patuloy na ginagamit ng mga tao - Isang right-click ang nagbibigay sa iyo ng sagot sa halip na maghalukay sa mga developer tool - Ang code ay handa nang kopyahin sa plain CSS, Tailwind, SCSS, o SASS, kaya direktang idinadagdag ito sa iyong proyekto - Ang mai-edit na preview ay nagbibigay-daan sa iyo na mag-prototype ng mga pagpipilian sa uri nang hindi hinahawakan ang isang linya ng code - Ang contrast checker ay bumubuo ng accessibility sa iyong workflow sa halip na iwanan ito bilang isang huling iniisip - Ang color picker at eyedropper ay nangangahulugang maaari kang kumuha ng sample at muling gamitin ang eksaktong kulay mula saanman sa pahina - Ang light at dark themes ay awtomatikong sumusunod sa iyong operating system, kaya tila nasa bahay ito araw o gabi - Ang pagpapalit ng unit sa pagitan ng px, rem, pt, at em ay pinapanatili ang output na nakahanay sa kung paano nakasulat ang iyong codebase 🎨 Isang mas malalim na pagtingin sa mga detalye Ang tipograpiya ay higit pa sa isang pangalan. Ipinapakita ng FontLens ang maliliit na desisyon na nagpaparamdam na tama ang teksto, mula sa bigat ng isang heading hanggang sa espasyo sa line-height at ang banayad na pagsubaybay ng letter-spacing. Ang pagtingin sa mga halagang ito nang magkatabi ay tumutulong sa iyo na maunawaan kung bakit gumagana ang isang disenyo at kung paano ito muling likhain. Nagdaragdag din ang badge ng provider ng konteksto, na nagsasabi sa iyo sa isang sulyap kung tinitingnan mo ang isang Google Fonts asset, isang Adobe Fonts face, isang self-hosted file, o isang system default, na madalas ang unang pahiwatig kapag sinimulan mong itugma o kumuha ng typeface. Ang mga tool ng kulay ay lumalampas sa isang static na readout. Nag-aalok ang picker ng HSV square na may hue at alpha sliders, at nagsasalita ito ng HEX, RGB, at HSL upang makapagtrabaho ka sa anumang format na angkop sa iyo. Ipares iyan sa eyedropper at maaari mong kunin ang eksaktong kulay ng anumang elemento at ilagay ito sa iyong preview o sa iyong mga tala. 🚀 Simulan ang pag-iinspeksyon Idagdag ang FontLens, i-highlight ang ilang salita, at mag-right-click upang ipakita ang tipograpiya, mga estilo, at mga kulay sa likod ng anumang pahina. Ito ay isang mabilis, pribado, at tunay na kapaki-pakinabang na kasama para sa sinumang nagmamalasakit kung paano nababasa ang web. I-install ito, panatilihing madaling gamitin, at huwag nang magtaka muli tungkol sa isang misteryosong font.