FontLens

Valitse teksti, napsauta hiiren kakkospainikkeella ja tarkastele fonttia, kokoa, painoa, väriä ja CSS:ää – kopioi, muokkaa ja lataa.

Oletko koskaan törmännyt sivun kirjasintyyppiin ja miettinyt "mikä fontti tämä on?" FontLens antaa vastauksen yhdellä napsautuksella. Valitse mikä tahansa teksti millä tahansa verkkosivustolla, napsauta hiiren kakkospainikkeella ja valitse "Tarkasta fontti FontLensillä". Sivun päälle avautuu siisti, keskittynyt paneeli, joka näyttää tarkalleen, miten teksti on tyylitelty: kirjasintyyppi, sen koko, paksuus, rivikorkeus, väri ja kaikki muut suunnittelun taustalla olevat yksityiskohdat. Olitpa sitten suunnittelija, joka perehtyy ulkoasuun, kehittäjä, joka sovittaa spesifikaatiota, tai vain utelias kauniin otsikon suhteen, tämä työkalu muuttaa minkä tahansa verkkosivun avoimeksi typografian kirjaksi. FontLens on fonttihaku ja CSS-tarkastaja samassa paketissa. Se ei vain nimeä fonttiperhettä puolestasi, vaan se antaa sinulle käyttövalmiin koodin, interaktiivisen leikkikentän ideoiden testaamiseen ja saavutettavuustyökalut varmistamaan tekstin luettavuuden. Ei tiliä. Ei rekisteröitymistä. Vain valitse, napsauta hiiren kakkospainikkeella ja tarkastele. 🔍 Mitä voit tehdä - Paljasta valitun tekstin koko typografia: fonttiperhe, fontin koko, fontin paksuus, rivikorkeus ja väri yhdellä silmäyksellä - Näe ylimääräinen tyyli, joka on helppo jättää huomiotta, kuten kirjainvälistys, tekstin muunnos ja fontin tyyli - Kopioi mikä tahansa yksittäinen ominaisuus yhdellä napsautuksella tai nappaa koko sääntöjoukko kokonaisena CSS-katkelmana - Muunna katkelma Tailwindiin, SCSS:ään tai SASS:iin yksinkertaisilla välilehdillä ja kopioi sitten kokonaan tai rivi riviltä - Kokeile live-tilassa, muokattavissa olevassa esikatselussa: kirjoita esimerkkisanoja uudelleen, säädä arvoja, vaihda taustaa ja näe miten se päivittyy välittömästi - Tunnista, mistä verkkofontti tulee, palveluntarjoajan tunnuksella (Google Fonts, Adobe Fonts, itse isännöity tai sisäänrakennettu järjestelmäfontti) - Tallenna verkkofontti tietokoneellesi "Lataa fontti" -painikkeella, suoraan sen omasta lähteestä - Tarkista värikontrasti WCAG-standardien mukaan, tarkan suhteen sekä AA- ja AAA-läpäisy- tai epäonnistumistulosten avulla - Valitse ja poimi värejä täydellisellä värivalitsimella, mukaan lukien pipetillä, jolla voi poimia minkä tahansa pikselin näytöltä - Vaihda mittayksiköitä px:n, remin, pt:n ja em:n välillä, sovellettuna sekä kenttiin että vietyyn koodiin 🖱️ Miten se toimii FontLensin käyttö vie sekunteja. Korosta sanat, joita haluat tutkia, napsauta valintaa hiiren kakkospainikkeella ja valitse valikosta "Tarkasta fontti FontLensillä". Paneeli ilmestyy nykyisen sivun päälle, siististi muotoiltuna, jotta se ei koskaan törmää sivuston omaan ulkoasuun. Sieltä voit lukea yksityiskohdat, kopioida tarvitsemasi tai aloittaa muokkaamisen. Live-esikatselu on hauska paikka. Muuta sanamuotoa testataksesi todellista otsikkoa, säädä kokoa, paksuutta tai aseta uusi taustaväri nähdäksesi, miten kirjasintyyppi pärjää. Muutoksesi pysyvät paikoillaan, kun siirryt sivujen välillä ja palaat myöhemmin, joten yhdellä sivustolla aloittamasi idea odottaa sinua seuraavalla. Kun haluat alkuperäiset arvot takaisin, "Palauta sivustoon" -painike palauttaa kaiken, mitä sivu todella käyttää. Tarvitsetko raakaa materiaalia? Ladattavan verkkofontin kohdalla yksi painike hakee todellisen tiedoston sen @font-face-sijainnista. Jos kirjasintyyppi toimitetaan jo käyttöjärjestelmäsi mukana, FontLens kertoo sinulle, että se on sisäänrakennettu fontti, joten tiedät, että se on saatavilla lataamatta. 🔒 Yksityisyys edellä FontLens toimii kokonaan selaimessasi. Tekstin tarkasteluun ei liity tiedonkeruuta, seurantaa, analytiikkaa tai ulkoisia palvelimia. Kaikki mitä tarkastelet, pysyy omalla koneellasi. Laajennus tekee tasan yhden verkkopyynnön, ja vain silloin, kun painat tarkoituksella "Lataa fontti", jolloin se ottaa yhteyttä kyseisen fontin omaan lähteeseen tiedoston noutamiseksi. Mikään muu ei poistu laitteeltasi. Luvat ovat tarkoituksella rajatut. Kontekstivalikon lupa lisää oikean hiiren painikkeen syötteen. Aktiivisen välilehden lupa antaa työkalun lukea valitsemasi tekstin sillä välilehdellä, jolla kutsut sen, eikä missään muualla. Tallennustila säilyttää esikatselutekstin sekä yksikkö- ja formaattiasetukset, jotta ne muistetaan seuraavalla kerralla. Ei ole laajaa pääsyä selaushistoriaasi eikä kattavia isäntälupia. 👥 Kenelle se sopii - Verkkosuunnittelijat, jotka haluavat tunnistaa kirjasintyypin, tallentaa väripaletin ja käyttää tyylejä uudelleen nopeasti - Front-end-kehittäjät, jotka sovittavat mockuppeja tai nostavat tarkkoja fonttiperhe- ja välistysarvoja koodiin - Käyttöliittymä- ja käyttökokemussuunnittelijat, jotka rakentavat johdonmukaisia, yhtenäisiä tyyppijärjestelmiä - Opiskelijat, jotka opiskelevat CSS:ää ja typografiaa ja haluavat nähdä, miten oikeat sivustot rakennetaan - Saavutettavuusauditoijat, jotka varmistavat, että teksti täyttää WCAG-kontrastivaatimukset ennen julkaisua - Bloggaajat, markkinoijat ja uteliaat lukijat, jotka haluavat yksinkertaisesti tietää, mitä fonttia sivusto käyttää ✨ Miksi ihmiset pitävät siitä kiinni - Yhdellä oikealla napsautuksella saat vastauksen sen sijaan, että kaivaisit kehittäjätyökaluja - Koodi on kopiointivalmis tavallisessa CSS:ssä, Tailwindissa, SCSS:ssä tai SASS:ssa, joten se pääsee suoraan projektiisi - Muokattavan esikatselun avulla voit prototypoida fonttivalintoja koskematta yhteenkään koodiriviin - Kontrastitarkistin rakentaa saavutettavuuden työnkulkuusi sen sijaan, että se olisi jälkihuomautus - Värivalitsin ja pipetti tarkoittavat, että voit poimia ja käyttää uudelleen tarkkoja värejä mistä tahansa sivulla - Vaaleat ja tummat teemat seuraavat käyttöjärjestelmääsi automaattisesti, joten se tuntuu kotoisalta niin päivällä kuin yölläkin - Yksikkövaihto px:n, remin, pt:n ja em:n välillä pitää tulosteen linjassa sen mukaan, miten koodikantasi on kirjoitettu 🎨 Tarkempi katsaus yksityiskohtiin Typografia on muutakin kuin nimi. FontLens tuo esiin pienet päätökset, jotka saavat tekstin tuntumaan oikealta, otsikon painosta rivikorkeuden hengitystilaan ja kirjainvälistyksen hienovaraiseen seurantaan. Näiden arvojen näkeminen rinnakkain auttaa ymmärtämään, miksi muotoilu toimii ja miten se luodaan uudelleen. Palveluntarjoajan tunnus lisää myös kontekstia, kertoen yhdellä silmäyksellä, katsotko Google Fonts -resurssia, Adobe Fonts -kirjasintyyppiä, itse isännöityä tiedostoa tai järjestelmän oletusarvoa, mikä on usein ensimmäinen vihje, kun lähdet etsimään tai hankkimaan kirjasintyyppiä. Värityökalut menevät staattista lukemaa pidemmälle. Valitsin tarjoaa HSV-neliön, jossa on sävy- ja alfaliukusäätimet, ja se osaa HEX-, RGB- ja HSL-arvoja, jotta voit työskennellä haluamassasi muodossa. Yhdistä se pipettiin, ja voit poimia minkä tahansa elementin tarkan sävyn ja pudottaa sen esikatseluun tai muistiinpanoihin. 🚀 Aloita tarkastelu Lisää FontLens, korosta joitakin sanoja ja napsauta hiiren kakkospainikkeella paljastaaksesi typografian, tyylit ja värit minkä tahansa sivun takana. Se on nopea, yksityinen ja aidosti hyödyllinen kumppani kaikille, jotka välittävät siitä, miten verkkosivut luetaan. Asenna se, pidä se käden ulottuvilla, äläkä enää koskaan ihmettele mysteerifonttia.