Skąd mam wiedzieć, jakich czcionek używa strona internetowa?

Jak mogę dowiedzieć się, jakich czcionek używa strona internetowa? Czy są jakieś narzędzia lub rozszerzenia przeglądarki, które mogą ułatwić pracę?

Opcja 1: Użyj rozszerzenia przeglądarki (łatwe)

Rozszerzenia takie jak WhatFont (dostępne dla Chrome, Firefox i Safari) znacznie ułatwiają wykrywanie rodzin czcionek dowolnego tekstu na stronie internetowej. Wystarczy zainstalować rozszerzenie, aktywować je na stronie i kliknąć element, który chcesz sprawdzić. Wyniki są wyświetlane w ruchomym polu, zawsze w kontekście twojego wyboru.

Opcja 2: Ręcznie sprawdź CSS za pomocą inspektorów przeglądarki (zaawansowane)

Większość przeglądarek internetowych pozwala łatwo znaleźć czcionki za pomocą right-click→ „Sprawdź” lub „Sprawdź element”. Można to również zrobić naciskając F12. Spowoduje to wyświetlenie listy stylów dołączonych do strony internetowej, które możesz eksplorować, aby znaleźć czcionki używane w dowolnym elemencie HTML.

Korzystanie z inspektora nie jest tak proste, jak korzystanie z rozszerzenia, ale ma kilka zalet. Wymagana jest znajomość CSS, ponieważ zwykle trzeba przejść przez kilka stylów, aby znaleźć ten, który jest stosowany. Zasadniczo style, które są przekreślone, są nadpisywane, dlatego zawsze szukaj tych, które są stosowane jako ostatnie.

Wszystkie style ze strony są wymienione na karcie Styl , ale jeśli zamiast tego użyjesz karty Obliczone , możesz znaleźć właściwości, które są aktywnie stosowane do wybranego elementu, w tym oczywiście rodzinę czcionek.

Wreszcie, innym sposobem szybkiego sprawdzenia, które czcionki są używane globalnie (ale NIE w jaki sposób i gdzie) jest przejście do „Aplikacja → Ramki → Czcionki” . Znajdziesz tam listę wszystkich odnośnych (niesystemowych) czcionek.

Ta druga metoda jest wolniejsza, ale użycie inspektora może dać ci wgląd w sposób budowy całej strony. Ponadto wielu projektantów i programistów używa go jako narzędzia do testowania zmian przed ich faktycznym zapisaniem w arkuszu stylów (ponieważ zmiana wiersza CSS w inspektorze uruchamia podgląd w czasie rzeczywistym w przeglądarce).

„Element kontrolny” przeglądarki nie jest idealny

Korzystanie z narzędzi programistycznych w przeglądarce jest dobrym sposobem na sprawdzenie, które czcionki są zadeklarowane w CSS strony internetowej. Nie pokazuje to jednak, która czcionka jest renderowana - pokazuje tylko zastosowany stos czcionek - rzeczywista renderowana czcionka może się różnić w zależności od zainstalowanych czcionek itp.

Kolejnym przydatnym narzędziem jest Fount .

Fount powie ci, którą czcionkę internetową na stosie czcionek faktycznie widzisz - nie tylko to, co powinno być widoczne. Podpowie ci także rozmiar, wagę i styl czcionki.

Korzystanie z Fount jest tak proste, jak dodanie zakładki. Nie musisz instalować aplikacji ani żadnych rozszerzeń.

Po dodaniu zakładki:

1. Przejdź do dowolnej witryny i kliknij bookmarklet Fount.
2. Kliknij dowolny typ, który chcesz zidentyfikować. Powtarzać.
3. Aby wyłączyć Fount, kliknij ponownie bookmarklet.

Fount działa w Safari, Chrome, Firefox i IE8 +.

Uwielbiam rozszerzenie przeglądarki Chrome CSSViewer . Wystarczy kliknąć i najechać kursorem na czcionkę, którą chcesz zidentyfikować, a wyświetli się rodzina czcionek.

FontFinder jest stworzony dla projektantów, programistów i typografów. Pozwala użytkownikowi analizować informacje o czcionce dowolnego elementu na stronie, kopiować dowolny fragment (y) tych informacji do schowka i wykonywać wbudowane zamiany w celu przetestowania nowych układów.

Ten dodatek jest najlepszy do znajdowania czcionki i innych css, takich jak grubość czcionki, rozmiar i wiele innych ze strony internetowej.