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

36

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ę?

font-identification web-fonts canonical

— Yisela
źródło

1

Zobacz moją odpowiedź na Stack Overflow dla wbudowanych narzędzi w Chrome i Firefox oraz opcję kopiuj-wklej dla Safari: stackoverflow.com/questions/884177/…

— Arjan

Bez 10 powtórzeń, więc robię to tutaj: jak do tej pory (2018.3), Fount nie jest dostępny, a WhatFont nie jest dostępny w dodatkowym sklepie Firefox; w końcu muszę wejść do DevTool przeglądarki Chrome / IE / FF / Opera, zakładki „Styl”, edytować właściwość, aby usunąć każdą czcionkę i zobaczyć, jaka jest zastosowana czcionka. Wielka szkoda, że wszystkie DevTools pokazują tylko pełny stos czcionek, a nie faktycznie zastosowany . Nawet w FF „najlepiej dopasowane” nie jest najlepiej dopasowane; wyskakujące okienko „najlepiej dopasowane” pokazuje się na każdej czcionce na stosie ... głupie, prawda?

— WesternGun

@WesternGun, co rozumiesz przez „wszystkich DevTools” ? Firefox i Chrome dobrze pokazują rzeczywistą czcionkę; zobacz zrzuty ekranu w odpowiedzi, którą umieściłem we wcześniejszym komentarzu.

— Arjan

OK, przeoczyłem zrzut ekranu @Arjan. Teraz to oczywiste.

— WesternGun

44

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).

— Yisela
źródło

1

Fajny ruch :-) jedna myśl - jak powiedzieć, która czcionka ze stosu rodziny czcionek jest tą, którą faktycznie widzisz na ekranie? Zwykle robię to metodą prób i błędów, usuwając pierwszą czcionkę, dopóki nie spowoduje to zmiany wyglądu, ale jestem pewien, że jest lepszy sposób. W WhatFont jest to kursywą? (ps witamy z powrotem!)

— user56reinstatemonica8

@ user568458 Dzięki :) Zdecydowanie chcę dodać zrzuty ekranu z procesu znajdowania czcionki z inspektorem. Ciężko mi się nawet po latach korzystania z niego! Ale szczerze mówiąc, właściwie nie mam odpowiedniej techniki, również próbuję i popełniam błędy. W WhatFont uważam, że pisanie kursywą oznacza, że nie jest to czcionka systemowa.

— Yisela,

@ Yisela z ciekawości, dlaczego zrzut ekranu WhatFont pokazuje czerwony kolor (# ea4858) niebieskiej czcionki? Czy to tylko wybrany wcześniej kolor, czy błąd? EDYCJA: Och, widzę, że to prawdopodobnie kolor najechania, kiedy wybierasz ten element, co wydaje się nie idealne, ale wciąż fajne.

— DasBeasto

@DasBeasto Tak, to kolor uniesienia! i.imgur.com/5NLjaEV.png Dobra uwaga, kolejne zwycięstwo w ręcznej kontroli, ponieważ pozwala wybrać różne stany interakcji.

— Yisela

3

Chciałem również dodać, Firefox (v35.0) ma dobry inspektor elementów dla czcionek. Możesz wybrać kartę czcionek, która powie Ci wszystkie szczegóły dotyczące wybranego elementu (rodzina czcionek, styl, rodzaj pliku), lub możesz nacisnąć „pokaż wszystkie czcionki użyte na stronie”, co pokaże wszystko, co zostało pobrane z serwera. Następnie możesz przejść do zakładki obliczeniowej, która również powie ci rzeczy takie jak rozmiar koloru itp. Bez dodatkowego bałaganu i dziedziczenia jak Chrome.

— DasBeasto

11

„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:

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

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

— Cai
źródło

Fount jest dobra, biorąc pod uwagę, że działa również dla IE, ale WhatFont wypada lepiej, ponieważ pokazuje rzeczywistą widoczną czcionkę, a także czcionkę określoną w znaczniku HTML. Porównanie jest więc szybkie.

— Moiz Tankiwala

1

Witryna w dół ... niedostępna w 2018 r.

— WesternGun

@FaithReaper strona (i skrypt) nadal działa dla mnie idealnie

— Cai

1

Wchodzę na stronę i widzę szary blok po lewej stronie, bez instrukcji czy nic? Nie mogę załadować zdjęć, ale wygląda to dziwnie. fount.artequalswork.com/

— WesternGun

@FaithReaper strona powinna wyglądać następująco: i.stack.imgur.com/goShP.png (Nie przesyłasz obrazów, to tylko zakładka, której używasz do sprawdzania czcionek używanych na stronach)

— Cai

1

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

— user86140
źródło

-2

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.

— Khushbu Solanki
źródło

3

Cześć Khushbu, witamy w GDSE. Czy możesz nam powiedzieć, co i gdzie możemy „FontFinder”? Ponadto, jeśli jesteś powiązany z produktem, musisz ujawnić swoje powiązanie w swoich odpowiedziach. Zobacz Jak nie być spamerem .

— Cai

2

Tekst w powyższej odpowiedzi to kopia i wklej z chrome.google.com/webstore/detail/font-finder/… i / lub add0n.com/font-finder.html

— ChrisW