Jakiej czcionki używa ta strona? Darmowy wykrywacz czcionek do Chrome

Trafiasz na stronę internetową i font w nagłówku Cię zatrzymuje. To dokładnie ten klimat, który od tygodni próbujesz uzyskać na własnej stronie. Klikasz prawym, próbujesz „zbadaj element" i lądujesz w ścianie CSS, przez którą musisz przekopać się, żeby znaleźć jedną linijkę font-family — jeśli w ogóle ją znajdziesz.

Krótka odpowiedź: zainstaluj FontMee, kliknij Inspect i najedź myszą na tekst. Dokładny font pojawia się od razu, bez narzędzi deweloperskich i bez zrzutu ekranu.

Zwykłe sposoby na znalezienie fontu i dlaczego są irytujące

Narzędzia deweloperskie przeglądarki technicznie działają, ale zostały zbudowane dla developerów debugujących layout, nie do szybkiego sprawdzenia nazwy fontu. Musisz otworzyć inspektora, kliknąć właściwy element w zagnieżdżonym drzewie, przewinąć przez obliczone style i mieć nadzieję, że font nie jest zakopany za tuzinem zmiennych CSS i stosów zapasowych. Strony do identyfikacji fontów też istnieją, ale większość chce, żebyś wgrał screenshot, a potem zgaduje z listy wizualnie podobnych dopasowań — wolno i często źle.

Warto wiedzieć: jest dużo szybszy sposób, który całkowicie omija oba te podejścia — najedź na tekst i dostań odpowiedź natychmiast, bez screenshotu i bez zakładki dev tools.

Rozwiązanie: FontMee

FontMee to darmowe rozszerzenie Chrome zbudowane dokładnie do tego. To panel boczny, który otwiera się obok dowolnej strony, z dwiema rzeczami, które tu się liczą: narzędziem Inspect, które natychmiast nazywa dowolny font, i żywą biblioteką 1900+ fontów, które możesz zastosować na tej samej stronie, żeby zobaczyć, jak wyglądałoby coś innego — nie tylko rozpoznać to, co już tam jest, ale faktycznie wypróbować alternatywy, zanim cokolwiek zdecydujesz.

Jak rozpoznać font — krok po kroku

1. Zainstaluj FontMee. Dodaj FontMee ze Chrome Web Store. Za darmo, bez konta.
2. Otwórz panel na stronie, o którą chodzi. Kliknij ikonę FontMee i panel boczny otwiera się obok strony.
3. Kliknij Inspect i najedź na tekst. Dokładna rodzina fontu, rozmiar, grubość, wysokość linii i odstępy między literami, które faktycznie się renderują, pojawiają się natychmiast — bez dev tools, bez kodu źródłowego.

To też żywy tester fontów, nie tylko identyfikator

Kiedy już wiesz, czego używa strona, wchodzi prawdziwa wartość FontMee: ten sam panel pozwala wypróbować dowolny z jego 1900+ fontów — pełny katalog Google Fonts plus ekskluzywne fonty Fontshare jak Satoshi i Clash Display — bezpośrednio na tej żywej stronie, w Twojej własnej przeglądarce, natychmiast.

• Cztery niezależne warstwy — zastosuj font do wszystkiego, tylko nagłówków, tylko tekstu głównego, albo jednego konkretnego elementu, w który klikniesz, każda zachowuje swój własny wybór
• Wybierz konkretny element — celuj dokładnie w jeden przycisk, tytuł albo akapit zamiast całej strony
• CSS gotowy do skopiowania — kiedy już się na coś zdecydujesz, jedno kliknięcie generuje @import i reguły gotowe do wklejenia we własny arkusz stylów
• Wgraj własne fonty — przynieś fonty marki klienta albo kupione fonty i podglądaj je na żywo w ten sam sposób
• Dostrój każdą warstwę — Suwaki grubości, rozmiaru, interlinii i odstępu liter, na żywo na stronie — i tylko z grubościami, które czcionka naprawdę ma.
• Zobacz i podmień czcionki strony — Lista czcionek, których strona naprawdę używa, z ich udziałem w tekście. Podmień dowolną wszędzie jednym kliknięciem.
• Gotowe pary — 32 pary nagłówek + tekst, które dobrze razem wyglądają, plus podpowiedzi do czcionki, którą już wybrałeś.
• Twój język, Twoje litery — Filtruj po łacińskim rozszerzonym, cyrylicy, greckim lub wietnamskim i podglądaj własny tekst — č, ć, š, ж, ω w komplecie.
• Eksport do prawdziwych projektów — CSS, zmienne CSS, Tailwind lub fragment HTML — albo ZIP do własnego hostingu z plikami czcionek, żeby goście nigdy nie dotykali Google.
• Obraz przed / po — Jedno kliknięcie kopiuje obraz strony obok siebie, z Twoją czcionką i bez niej. Gotowy do wysłania klientowi.
• Działa przy zamkniętym panelu — Skróty do Sprawdź, oryginał / podgląd i losowej czcionki. Sprawdź otwiera na stronie kartę, na której na żywo poprawisz rozmiar i grubość.
• Kolekcje i synchronizacja — Układaj zapisane czcionki w kolekcjach, eksportuj lub importuj zestawy i, jeśli chcesz, synchronizuj je między urządzeniami z Chrome.

Nic, co robisz, nigdy nie dotyka samej strony — przeładuj stronę albo zamknij kartę i wszystko wraca do normy dla Ciebie i wszystkich innych. To całkowicie bezpieczny sposób, żeby przetestować „co jeśli to byłby inny font" na własnej stronie, zanim napiszesz linijkę CSS, albo na cudzej, żeby po prostu zobaczyć, jak font by się sprawdził.

Masz już font? Teraz potrzebuje domu. Jeśli font jest do strony, którą dopiero zamierzasz zbudować, kreator stron pozwala go ustawić przez bezpośrednią edycję strony, bez pisania kodu. Weblium jest jednym z nich.

Zdobądź rozszerzenie

FontMee jest darmowe, z 1900+ fontami, wszystkimi czterema warstwami, Inspect i Copy CSS wliczonymi bez opłat. Jeśli spędzasz jakikolwiek czas decydując o fontach — dla własnej strony, klienta, albo z czystej ciekawości o stronie, która Ci się podoba — zamienia zgadywanie w coś, co faktycznie możesz zobaczyć.

Warto wiedzieć, zanim zaczniesz

FAQ