FontLens

Jelöljön ki bármilyen szöveget, kattintson jobb gombbal, és azonnal ellenőrizze a betűtípusát, méretét, vastagságát, színét és…

Előfordult már, hogy egy oldalra tévedt, megcsodálta a betűket, és elgondolkodott: „milyen betűtípus ez?” A FontLencse egyetlen kattintással megválaszolja ezt a kérdést. Jelöljön ki bármilyen szöveget bármely weboldalon, kattintson jobb gombbal, és válassza az „Inspect font with FontLens” (Betűtípus vizsgálata FontLens-szel) opciót. Egy letisztult, fókuszált panel nyílik meg közvetlenül az oldal tetején, és pontosan feltárja, hogyan van formázva a szöveg: a betűtípus, annak mérete, vastagsága, sormagassága, színe és minden egyéb részlet a kialakítás mögött. Akár egy elrendezést visszafejtő tervező, akár egy specifikációt illesztő fejlesztő, vagy egyszerűen csak kíváncsi egy gyönyörű főcímre, ez az eszköz bármely weboldalt a tipográfia nyitott könyvévé varázsolja. A FontLencse egy betűtípus-kereső és CSS-vizsgáló egyben. Nem csupán megnevezi a betűtípus-családot, hanem használatra kész kódot, egy interaktív játszóteret ad az ötletek tesztelésére, és akadálymentesítési eszközöket, hogy a szöveg olvasható legyen. Nincs fiók. Nincs regisztráció. Csak kijelölés, jobb kattintás és vizsgálat. 🔍 Mit tehet - Feltárja a kiválasztott szavak teljes tipográfiáját: betűtípus-család, betűméret, betűtípus vastagsága, sormagasság és szín egy pillantással - Látja az extra stílusokat, amelyeket könnyű kihagyni, mint például a betűközt, a szövegátalakítást és a betűtípus-stílust - Egyetlen kattintással kimásolhat bármilyen tulajdonságot, vagy kimásolhatja az egész szabálykészletet mint teljes CSS kódrészletet - Konvertálja ezt a kódrészletet Tailwind, SCSS vagy SASS formátumba egyszerű lapokon keresztül, majd másolja egészben vagy soronként - Kísérletezzen egy élő, szerkeszthető előnézetben: írja át a mintaszavakat, módosítsa az értékeket, cserélje le a hátteret, és nézze meg, hogyan frissül azonnal - Azonosítsa, honnan származik egy webes betűtípus egy szolgáltatói jelvénnyel (Google Fonts, Adobe Fonts, saját szerveren tárolt, vagy beépített rendszer betűtípus) - Menthessen egy webes betűtípust a számítógépére a „Betűtípus letöltése” gombbal, közvetlenül a saját forrásából - Ellenőrizze a színkontrasztot a WCAG szabványok szerint, pontos aránnyal, valamint AA és AAA átment/sikertelen eredménnyel - Választ és mintavételez színeket egy teljes színválasztóval, beleértve egy pipettát, amellyel bármelyik képpontot rögzítheti a képernyőn - Váltsa a mértékegységeket px, rem, pt és em között, alkalmazva mind a mezőkre, mind az exportált kódra 🖱️ Hogyan működik A FontLencse használata másodpercekig tart. Jelölje ki a tanulmányozni kívánt szavakat, kattintson jobb gombbal a kijelölésre, és válassza az „Inspect font with FontLens” (Betűtípus ellenőrzése FontLens-szel) opciót a menüből. A panel megjelenik az aktuális oldal felett, ügyesen formázva, így soha nem ütközik az oldal saját megjelenésével. Onnan elolvashatja a részleteket, kimásolhatja, amire szüksége van, vagy elkezdheti a szerkesztést. Az élő előnézet az, ahol a dolgok szórakozatóvá válnak. Változtassa meg a szöveget, hogy teszteljen egy valódi főcímet, módosítsa a méretet, állítsa be a vastagságot, vagy állítson be egy új háttérszínt, hogy lássa, hogyan állja meg a helyét a betűtípus. A szerkesztések megmaradnak, ahogy az oldalak között mozog, és később visszatér, így egy ötlet, amelyet egy oldalon kezdett, a következőn várja. Ha vissza szeretné állítani az eredeti értékeket, a „Visszaállítás az oldalra” gomb mindent visszaállít, amit az oldal ténylegesen használ. Szüksége van a nyers eszközre? Letölthető webes betűtípus esetén egy gomb lekéri a tényleges fájlt a @font-face helyéről. Az operációs rendszerrel már szállított betűtípusok esetén a FontLencse megmondja, hogy beépített betűtípus, így tudja, hogy letöltés nélkül is elérhető. 🔒 Első a magánélet A FontLencse teljes egészében a böngészőjében fut. Nincs adatgyűjtés, nincs követés, nincs analitika, és nincs külső szerver bevonva a szöveg vizsgálatába. Minden, amit megvizsgál, a gépén marad. A bővítmény pontosan egy hálózati kérést hajt végre, és csak akkor, ha szándékosan megnyomja a „Betűtípus letöltése” gombot, ekkor veszi fel a kapcsolatot a betűtípus saját forrásával a fájl lekéréséhez. Semmi más nem hagyja el az eszközt. Az engedélyek szándékosan szűkek. A helyi menü engedélye hozzáadja a jobb kattintás bejegyzését. Az aktív lap engedélye lehetővé teszi az eszköz számára, hogy elolvassa a kiválasztott szöveget azon a lapon, ahol meghívja, és máshol nem. A tárhely megőrzi az előnézeti szövegét, valamint az egység- és formátumbeállításait, így azok a következő alkalommal is megmaradnak. Nincs széles körű hozzáférés a böngészési előzményeihez és nincsenek átfogó gazda-engedélyek. 👥 Kinek szól ez - Webtervezőknek, akik azonosítani szeretnének egy betűtípust, rögzíteni egy palettát, és gyorsan újra felhasználni a stílusokat - Frontend fejlesztőknek, akik egy makettet illesztenek vagy pontos betűtípus-család és térköz értékeket emelnek át kódba - UI és UX mérnököknek, akik konzisztens, márkához illő típusrendszereket építenek - CSS-t és tipográfiát tanuló diákoknak, akik látni szeretnék, hogyan állnak össze a valós oldalak - Akadálymentesítési auditoroknak, akik ellenőrzik, hogy a szöveg megfelel-e a WCAG kontrasztkövetelményeknek a közzététel előtt - Bloggereknek, marketingeseknek és kíváncsi olvasóknak, akik egyszerűen tudni szeretnék, milyen betűtípust használ egy webhely ✨ Miért tartják meg az emberek - Egy jobb kattintással választ kap, anélkül, hogy a fejlesztői eszközökben kellene turkálnia - A kód másolásra kész egyszerű CSS-ben, Tailwind-ben, SCSS-ben vagy SASS-ban, így egyből beilleszthető a projektjébe - A szerkeszthető előnézet lehetővé teszi, hogy prototípust készítsen a típusválasztásokról anélkül, hogy egyetlen kódsort is megérintene - A kontrasztellenőrző beépíti az akadálymentességet a munkafolyamatba, ahelyett, hogy utólagos gondolatként kezelné - A színválasztó és a pipetta azt jelenti, hogy a lap bármely pontjáról mintavételezhet és újra felhasználhat pontos színeket - Világos és sötét témák automatikusan követik az operációs rendszerét, így otthonosan érzi magát nappal és éjszaka is - Az egységváltás a px, rem, pt és em között összhangban tartja a kimenetet azzal, ahogyan a kódbázisát írták 🎨 Részletesebb betekintés a részletekbe A tipográfia több mint egy név. A FontLencse feltárja azokat az apró döntéseket, amelyek miatt egy szöveg rendben van, egy címsor súlyától a sormagasságban lévő légtérig és a betűközt finom nyomkövetéséig. Ezeknek az értékeknek az összehasonlítása segít megérteni, miért működik egy design, és hogyan lehet azt újra létrehozni. A szolgáltatói jelvény is hozzáad kontextust, egy pillantással megmondva, hogy Ön Google Fonts eszközt, Adobe Fonts típust, saját szerveren tárolt fájlt vagy rendszerbeli alapértelmezettet néz-e, ami gyakran az első nyom, amikor egy betűtípus egyeztetéséhez vagy beszerzéséhez lát hozzá. A szín eszközei túlmutatnak egy statikus kijelzésen. A választó HSV négyzetet kínál árnyalat- és átlátszósági csúszkákkal, és beszél HEX, RGB és HSL formátumokat, így bármilyen formátumban dolgozhat, ami megfelel Önnek. Párosítsa ezt a pipettával, és bármely elem pontos árnyalatát felemelheti és beillesztheti az előnézetébe vagy a jegyzeteibe. 🚀 Kezdje el a vizsgálatot Adja hozzá a FontLencsét, jelöljön ki néhány szót, és kattintson jobb gombbal, hogy felfedje az oldal mögötti tipográfiát, stílusokat és színeket. Gyors, privát és valóban hasznos társ mindazok számára, akik törődnek azzal, hogyan olvasható a web. Telepítse, tartsa kéznél, és soha többé ne csodálkozzon egy rejtélyes betűtípuson.