FontLens

Darmowe rozszerzenie do Chrome

Jaki to font? Kliknij prawym i sprawdź CSS

Zaznacz tekst na dowolnej stronie, kliknij prawym przyciskiem i wybierz „Inspect font with FontLens”. Inspektor otworzy się na stronie z rodziną, rozmiarem, grubością, interlinią i kolorem, gotowym do skopiowania CSS oraz przyciskiem pobierania fontu.

Dodaj do Chrome — za darmo

Działa też w Edge, Brave, Opera i innych przeglądarkach Chromium.

Inspektor FontLens: próbka Ag między liniami wysokości wersalików, wysokości x i linią bazową, właściwości fontu oraz fragment Tailwind

W skrócie

What it does
Pokazuje font zaznaczonego tekstu: rodzinę, rozmiar, grubość, interlinię, kolor i inne style różniące się od domyślnych, wraz z CSS gotowym do skopiowania.
How to start
Zaznacz tekst, kliknij prawym przyciskiem i wybierz „Inspect font with FontLens”. Pozycja menu pojawia się tylko po zaznaczeniu tekstu.
Copy as
CSS, SCSS, SASS lub Tailwind, z rozmiarem w px, rem, pt lub em.
Font file
„Download font” pobiera font internetowy ze źródła @font-face. Przed użyciem sprawdź jego licencję.
Who it is for
Projektanci stron, programiści front-end, audytorzy dostępności i osoby uczące się CSS.
Price
Za darmo. Bez konta i płatnej wersji.
Data
Działa w przeglądarce. Bez serwerów i analityki. Jedynym żądaniem jest rozpoczęte przez Ciebie pobranie fontu.
Works in
Chrome i inne przeglądarki Chromium instalujące rozszerzenia z Chrome Web Store. Bez Firefox i Safari.
Limits
Odczytuje CSS prawdziwego tekstu na stronach. Nie rozpoznaje tekstu na obrazach, w canvasach ani PDF-ach, ani na stronach Chrome.
Wersja
2.2.0, aktualizacja 23 października 2026

Dwa kliknięcia do fontu

  1. 1

    Select text

    Nagłówek, akapit lub etykieta przycisku na dowolnej stronie.

  2. 2

    Right-click

    Wybierz „Inspect font with FontLens”. Inspektor otworzy się na stronie z rodziną, rozmiarem, grubością, interlinią i kolorem.

  3. 3

    Copy or tweak

    Kopiuj CSS lub Tailwind, wypróbuj inny rozmiar albo kolor w podglądzie na żywo lub pobierz plik fontu.

Dlaczego warto go otworzyć

Aa

Rozpoznaj krój pisma

Podoba Ci się nagłówek? Zaznacz go i sprawdź rodzinę, grubość oraz źródło fontu: Google Fonts, Adobe Fonts albo sama witryna.

{ }

Dopasuj makietę

Porównaj wartości na stronie z plikiem projektu, a potem skopiuj reguły jako CSS, SCSS, SASS lub Tailwind.

4.5:1

Sprawdź kontrast

Sprawdź współczynnik kontrastu z oznaczeniami AA i AAA. Przed publikacją przetestuj ciemniejszy tekst lub jaśniejsze tło.

Co potrafi

  • Próbka z liniami pomocniczymi

    Pierwsza rodzina ze stosu, pokazana między liniami wysokości wersalików, wysokości x i linią bazową, zmierzonymi na podstawie fontu.

  • formaty fragmentów

    CSS, SCSS, SASS i Tailwind. Kopiuj cały fragment lub jedną linię; ostatni format zostaje zapamiętany.

  • Twoje jednostki

    Pokazuj rozmiar w px, rem, pt lub em w polach i fragmencie. rem korzysta z rozmiaru głównego strony.

  • Źródło fontu

    Znacznik pokazuje źródło fontu: Google Fonts, Adobe Fonts, własny serwer albo font systemowy zainstalowany na komputerze.

  • Sprawdzanie kontrastu

    Współczynnik między tekstem a tłem z oznaczeniami AA i AAA dla zwykłego i dużego tekstu. Aktualizuje się po zmianie kolorów.

  • Pobierz font

    Pobiera plik ze źródła @font-face i nadaje mu nazwę rodziny fontu. Jeśli serwer blokuje pobieranie, źródło otworzy się w nowej karcie.

Dlaczego „jaki to font?” długo zajmuje w DevTools

Strona deklaruje listę fontów, a przeglądarka używa pierwszego dostępnego. Aby sprawdzić którego, otwierasz DevTools, znajdujesz element, czytasz panel Computed, a potem szukasz pliku fontu w panelu Network. Rozmiar, grubość, interlinia i kolor są w różnych miejscach.

FontLens odczytuje obliczony styl zaznaczonego tekstu i pokazuje go w jednym panelu: stos rodzin, próbkę pierwszej rodziny, parametry, źródło fontu i CSS. Odczytuje CSS strony, więc nie rozpoznaje fontów na obrazach.

Nic nie opuszcza przeglądarki

  • Bez konta i serwerów

    FontLens działa w przeglądarce. Bez analityki i śledzenia.

  • Odczytuje zaznaczony tekst

    Inspektor odczytuje style tekstu klikniętego prawym przyciskiem. Żadne informacje o stronie nie są wysyłane.

  • Cztery uprawnienia

    Menu kontekstowe dla pozycji po kliknięciu prawym przyciskiem, dostęp do aktywnej karty i strony, by otworzyć inspektor, oraz pamięć na przykładowy tekst, jednostkę i format fragmentu.

Chrome DevTools a FontLens

Chrome DevTools a FontLensChrome DevToolsFontLens
Znajdź font tekstuZbadaj stronę, znajdź element i otwórz panel ComputedZaznacz tekst, kliknij prawym przyciskiem i wybierz pozycję menu
Kopiowanie jako Tailwind lub SCSSNie, wartości trzeba kopiować pojedynczoKarta CSS, SCSS, SASS lub Tailwind
Źródło fontuPoszukaj pliku fontu w panelu NetworkZnacznik: Google Fonts, Adobe Fonts, własny serwer lub system
Pobieranie pliku fontuZnajdź go w Network lub Sources i zapiszJeden przycisk
Sprawdzanie kontrastuW próbniku kolorów w panelu StylesOznaczenia AA i AAA obok podglądu na żywo
CenaWbudowaneZa darmo

Pytania

Jak sprawdzić, jakiego fontu używa strona?

Dodaj FontLens do Chrome, zaznacz tekst na stronie, kliknij prawym przyciskiem i wybierz „Inspect font with FontLens”. Zobaczysz rodzinę, rozmiar, grubość, interlinię, kolor i źródło fontu.

Jak skopiować CSS fontu ze strony?

W inspektorze wybierz kartę CSS, SCSS, SASS lub Tailwind i kliknij „Copy all” albo skopiuj pojedynczą linię. W razie potrzeby najpierw zmień jednostkę na px, rem, pt lub em.

Czy mogę pobrać font ze strony?

Jeśli tekst używa fontu internetowego, „Download font” pobiera plik ze źródła @font-face. Fontu systemowego nie da się pobrać. Przed użyciem we własnym projekcie sprawdź licencję.

Czy FontLens rozpoznaje font na obrazie lub w PDF?

Nie. Odczytuje CSS prawdziwego tekstu na stronach, więc nie rozpoznaje fontów na obrazach, w canvasach ani PDF-ach.

Jak sprawdzić kontrast tekstu zgodnie z WCAG?

Podgląd pokazuje współczynnik kontrastu tekstu i tła wraz z oznaczeniami AA i AAA dla zwykłego i dużego tekstu. Zmień dowolny kolor, a oznaczenia się zaktualizują.

Czy mogę wyświetlać rozmiary w rem zamiast px?

Tak. Zmień jednostkę na px, rem, pt lub em, a pola i fragment zostaną zaktualizowane. rem jest obliczany na podstawie głównego rozmiaru fontu strony, a wybór zostaje zapamiętany.

Czy rozszerzenie jest darmowe? Czy zbiera dane?

Jest darmowe i nie wymaga konta. Nie ma serwerów ani analityki; jedynym żądaniem jest rozpoczęte przez Ciebie pobranie fontu.

Czy działa w Edge, Brave lub Opera?

Większość przeglądarek Chromium instaluje rozszerzenia z Chrome Web Store, w tym Edge, Brave, Opera i Vivaldi. Firefox i Safari nie są obsługiwane.

Więcej darmowych rozszerzeń od PYROCTAL

Jaki to font? Dwa kliknięcia.

Add to Chrome — free