FontLens

Zaznacz dowolny tekst, kliknij prawym przyciskiem myszy i natychmiast sprawdź jego czcionkę, rozmiar, wagę, kolor i CSS – kopiuj,…

Czy kiedykolwiek zdarzyło Ci się wylądować na stronie, podziwiać litery i zastanawiać się "co to za czcionka?" FontLens odpowiada na to pytanie jednym kliknięciem. Wybierz dowolny tekst na dowolnej stronie internetowej, kliknij prawym przyciskiem myszy i wybierz "Sprawdź czcionkę z FontLens". Czysty, skoncentrowany panel otworzy się bezpośrednio nad stroną i ujawni dokładnie, jak ten tekst jest wystylizowany: krój pisma, jego rozmiar, grubość, wysokość linii, kolor i każdy inny szczegół stojący za projektem. Niezależnie od tego, czy jesteś projektantem odtwarzającym układ, deweloperem dopasowującym specyfikację, czy po prostu ciekawym pięknego nagłówka, to narzędzie zamienia każdą stronę internetową w otwartą księgę typografii. FontLens to wyszukiwarka czcionek i inspektor CSS w jednym. Nie tylko podaje nazwę rodziny czcionek, ale dostarcza gotowy do użycia kod, interaktywny plac zabaw do testowania pomysłów i narzędzia dostępności, aby upewnić się, że tekst jest czytelny. Bez konta. Bez rejestracji. Po prostu wybierz, kliknij prawym przyciskiem myszy i zbadaj. 🔍 Co możesz zrobić - Odsłoń pełną typografię dowolnych wybranych słów: rodzinę czcionek, rozmiar czcionki, grubość czcionki, wysokość linii i kolor — od razu - Zobacz dodatkowe stylizacje, które łatwo przeoczyć, takie jak odstępy między literami, przekształcanie tekstu i styl czcionki - Skopiuj dowolną pojedynczą właściwość jednym kliknięciem lub pobierz cały zestaw reguł jako kompletny fragment CSS - Skonwertuj ten fragment do Tailwind, SCSS lub SASS za pomocą prostych zakładek, a następnie skopiuj całość lub wiersz po wierszu - Eksperymentuj w żywym, edytowalnym podglądzie: przepisz przykładowe słowa, dostosuj wartości, zmień tło i obserwuj natychmiastową aktualizację - Zidentyfikuj źródło czcionki internetowej za pomocą odznaki dostawcy (Google Fonts, Adobe Fonts, własny hosting lub wbudowany krój systemowy) - Zapisz czcionkę internetową na swoim komputerze za pomocą przycisku "Pobierz czcionkę", pobraną bezpośrednio z jej własnego źródła - Sprawdź kontrast kolorów zgodnie z normami WCAG, z dokładnym współczynnikiem oraz wynikami pozytywnymi lub negatywnymi dla AA i AAA - Wybierz i próbkuj kolory za pomocą pełnego próbnika, w tym pipetki do pobierania dowolnego piksela na ekranie - Przełączaj jednostki miary między px, rem, pt i em, stosowane zarówno do pól, jak i eksportowanego kodu 🖱️ Jak to działa Korzystanie z FontLens zajmuje kilka sekund. Zaznacz słowa, które chcesz zbadać, kliknij prawym przyciskiem myszy na zaznaczenie i wybierz "Sprawdź czcionkę z FontLens" z menu. Panel pojawi się nad bieżącą stroną, schludnie stylizowany, tak aby nigdy nie kolidował z wyglądem witryny. Stamtąd możesz odczytać szczegóły, skopiować to, czego potrzebujesz, lub rozpocząć edycję. Podgląd na żywo to miejsce, gdzie zaczyna się zabawa. Zmień sformułowanie, aby przetestować prawdziwy nagłówek, dostosuj rozmiar, wyreguluj grubość lub ustaw nowy kolor tła, aby zobaczyć, jak wygląda czcionka. Twoje edycje pozostają, gdy przechodzisz między stronami i wracasz później, więc pomysł, który rozpocząłeś na jednej stronie, czeka na Ciebie na następnej. Gdy chcesz przywrócić oryginalne wartości, przycisk "Przywróć do strony" przywraca wszystko, co faktycznie używa strona. Potrzebujesz surowego zasobu? W przypadku czcionki internetowej do pobrania, jeden przycisk pobiera rzeczywisty plik z jego lokalizacji @font-face. W przypadku kroju pisma, który jest już dostarczany z Twoim systemem operacyjnym, FontLens informuje Cię, że jest to wbudowana czcionka, więc wiesz, że jest dostępna bez żadnego pobierania. 🔒 Prywatność przede wszystkim FontLens działa całkowicie w Twojej przeglądarce. Nie ma zbierania danych, śledzenia, analiz i żadnych zewnętrznych serwerów zaangażowanych w inspekcję tekstu. Wszystko, co badasz, pozostaje na Twojej maszynie. Rozszerzenie wykonuje dokładnie jedno żądanie sieciowe, i tylko wtedy, gdy celowo naciśniesz "Pobierz czcionkę", w którym to momencie łączy się z własnym źródłem tej czcionki, aby pobrać plik. Nic innego nie opuszcza Twojego urządzenia. Uprawnienia są celowo wąskie. Uprawnienie menu kontekstowego dodaje wpis w menu prawego kliknięcia. Uprawnienie aktywnej karty pozwala narzędziu odczytać wybrany tekst na karcie, na której je wywołujesz, i nigdzie indziej. Przechowywanie zachowuje Twój tekst podglądu oraz preferencje jednostek i formatu, aby były pamiętane następnym razem. Nie ma szerokiego dostępu do historii przeglądania i żadnych wszechstronnych uprawnień hosta. 👥 Dla kogo to jest - Projektanci stron internetowych, którzy chcą zidentyfikować krój pisma, uchwycić paletę i szybko ponownie wykorzystać style - Programiści front-end dopasowujący makietę lub przenoszący dokładne wartości rodziny czcionek i odstępów do kodu - Inżynierowie UI i UX budujący spójne, zgodne z marką systemy typograficzne - Studenci uczący się CSS i typografii, którzy chcą zobaczyć, jak budowane są prawdziwe strony internetowe - Audytorzy dostępności weryfikujący, czy tekst spełnia wymagania kontrastu WCAG przed wdrożeniem - Blogerzy, marketingowcy i ciekawcy czytelnicy, którzy po prostu chcą wiedzieć, jakiej czcionki używa strona ✨ Dlaczego ludzie to cenią - Jedno kliknięcie prawym przyciskiem myszy daje odpowiedź zamiast grzebać w narzędziach deweloperskich - Kod jest gotowy do skopiowania w zwykłym CSS, Tailwind, SCSS lub SASS, więc można go bezpośrednio wkleić do projektu - Edytowalny podgląd umożliwia prototypowanie wyborów typograficznych bez dotykania ani jednej linii kodu - Sprawdzanie kontrastu wbudowuje dostępność w Twój workflow, a nie pozostawia jej jako dodatek - Próbnik kolorów i pipeta oznaczają, że możesz próbować i ponownie używać dokładnych kolorów z dowolnego miejsca na stronie - Jasne i ciemne motywy automatycznie podążają za Twoim systemem operacyjnym, więc czujesz się jak w domu w dzień i w nocy - Przełączanie jednostek między px, rem, pt i em utrzymuje wyjście zgodne z tym, jak napisano Twój codebase 🎨 Zbliżenie na szczegóły Typografia to coś więcej niż nazwa. FontLens ujawnia drobne decyzje, które sprawiają, że tekst wydaje się odpowiedni, od grubości nagłówka po przestrzeń w wysokości linii i subtelny tracking odstępów między literami. Widzenie tych wartości obok siebie pomaga zrozumieć, dlaczego projekt działa i jak go odtworzyć. Odznaka dostawcy dodaje również kontekst, mówiąc na pierwszy rzut oka, czy patrzysz na zasób Google Fonts, krój pisma Adobe Fonts, samodzielnie hostowany plik, czy też domyślny system, co często jest pierwszą wskazówką, gdy zamierzasz dopasować lub pozyskać krój pisma. Narzędzia do kolorów wykraczają poza statyczny odczyt. Próbnik oferuje kwadrat HSV z suwakami barwy i alfa, i obsługuje HEX, RGB i HSL, dzięki czemu możesz pracować w formacie, który Ci odpowiada. Połącz to z pipetą, a możesz podnieść precyzyjny odcień dowolnego elementu i wstawić go do podglądu lub notatek. 🚀 Zacznij sprawdzać Dodaj FontLens, zaznacz kilka słów i kliknij prawym przyciskiem myszy, aby odkryć typografię, style i kolory stojące za każdą stroną. Jest to szybki, prywatny i naprawdę przydatny towarzysz dla każdego, kto dba o to, jak czyta się Internet. Zainstaluj go, miej go pod ręką i nigdy więcej nie zastanawiaj się nad tajemniczą czcionką.