Na przykład: podoba mi się czcionka użyta na stronie: NYTimes , więc coś, co mogłoby wymienić wszystkie czcionki użyte na stronie byłoby świetne!
Ja nie chce narzędzia przetwarzania obrazu , które mogą analizować screeny lub witrynę, która będzie zadawać pytania o czcionce i wąski dół z jego listy.
Coś, co może po prostu zaindeksować witrynę i wyświetlić listę czcionek ... Byłoby wspaniale, gdyby mógł nakładać czcionki na regiony, ale myślę, że byłoby to za daleko.
software-rec
website
fonts
Lazer
źródło
źródło
Odpowiedzi:
Istnieje wiele sposobów osiągnięcia tego celu. W rzeczywistości robię to dość często, ponieważ bardzo interesuje mnie działanie CSS, a także uwielbiam typografię. Dwa sposoby, które lubię to robić:
font-familywłaściwość cssw inspektorze (na prawym pasku bocznym), który powie ci, jaka jest czcionka (patrz poniżej, jak interpretować ten CSS). Możesz użyć Firebug dla Firefoksa, aby osiągnąć coś podobnego, ale uważam, że narzędzie Google Chrome Inspector jest znacznie lepsze (jestem programistą - używam go do wszystkiego!).Możesz też ręcznie wyświetlić źródło strony i przeanalizować CSS. Oto jak to zrobić:
Gdy jesteś na stronie, wyświetl źródło. Jeśli korzystasz z Internet Explorera, przejdź do Page -> View Source lub View -> Source. Jeśli używasz przeglądarki Firefox, Chrome lub innej nowoczesnej przeglądarki, naciśnij Ctrl + U (lub Apple + U, w zależności od systemu operacyjnego).
W kodzie HTML wyszukaj treść, którą próbujesz przeanalizować. Powinieneś znaleźć niektóre znaczniki, które zawierają tekst, i mogą albo mieć czcionki zakodowane na stałe w kodzie HTML (za pomocą
<font>znacznika lub wstyleatrybucie a<p>lub w<div>załączniku), albo mogą odwoływać się do niektórych CSS (poszukaj atrybutuclasslubidi zapisz je).Jeśli jest to drugie (odwołuje się do CSS), przejdź na górę HTML i znajdź
<link>tagi<head>na stronie. Jeśli link odwołuje się do arkusza stylów, zobaczysz go - wystarczy, że przejdziesz do arkusza stylów CSS i poszukasz zapisanych identyfikatorów klasy lub identyfikatora. Gdzieś znajdziesz odpowiednifont-familyproerpty (nie zapominaj, możesz również ustawiać czcionki globalnie w całej witrynie, a to byłoby pod<body>tagiem lub coś innego. Dlatego powinieneś użyć narzędzia inspektora, ponieważ tę trudność można przezwyciężyć ).Jak interpretować
font-familycss:font-familyNieruchomość będzie określić, jakie czcionki są. W tej właściwości czcionki będą oddzielone przecinkami . Podczas renderowania strony przeglądarka przejdzie przez tę listę i użyje pierwszej czcionki znajdującej się na komputerze . W wielu przypadkach na końcu tej właściwości znajduje się również kategoria czcionek, która jest po prostu „tylko w przypadku”, więc domyślna czcionka dla tej kategorii jest używana, jeśli żadne inne nie są dostępne.Przykład: powiedzmy, że jest to trochę css dla
<p>obudowy.Tutaj przeglądarka najpierw spróbuje użyć Calibri, jeśli czcionka jest dostępna. Jeśli nie, używa Comic Sans MS lub Georgia lub tylko domyślnej czcionki sans-serif, jeśli inne nie są dostępne.
W ten sposób możesz dowiedzieć się, jakie czcionki są używane. Nie znalazłem żadnych dobrze zbudowanych i pomocnych narzędzi, które wizualizują CSS w bardzo przyjemny sposób, ale myślę, że opcja Inspektora będzie dla ciebie działać (nie jest to zbyt mylące!). Myślę, że to jest właściwa droga.
Przykład znajdowania czcionek NYTimes za pomocą narzędzia Inspector:
Pokażę Ci, jak znaleźć czcionki w głównym tekście artykułu NYTimes w Google Chrome.
Przejdź do artykułu na NYTimes.com, kliknij prawym przyciskiem myszy element tekstowy, dla którego chcesz znaleźć czcionki, i kliknij Inspect Element .
Spójrz na pasek boczny po prawej stronie. W menu rozwijanym Styl obliczony zobaczysz właściwości CSS tego elementu. Jednak, jak widać, obecnie nie ma tutaj właściwości rodziny czcionek, co oznacza, że czcionki są zdefiniowane globalnie, nie tylko dla tego konkretnego elementu. Istnieje jednak sposób na obejście tego!
Oto co robisz: wybierz przycisk opcji obok „Pokaż odziedziczone”.
Wiele innych globalnych właściwości pojawi się w „Stylu obliczeniowym”.
Przewiń listę w dół do „rodziny czcionek”. Powinien być w kolorze szarym, co oznacza, że jest to odziedziczona własność globalna. Tutaj możesz zobaczyć użyte czcionki! Ta-da!
źródło
Istnieją dwie różne rzeczy:
1. Która (zastępcza) czcionka jest faktycznie używana
Aby mieć pewność, która czcionka jest używana w określonej przeglądarce na komputerze / systemie operacyjnym, Firefox i Chrome mają teraz do tego wbudowane narzędzia. Podobnie jak Firefox Page Inspector ma widok czcionek :
Aby uzyskać więcej informacji, zobacz Jak określić czcionkę używaną przez przeglądarkę do renderowania tekstu? na przepełnienie stosu. To obejmuje:
2. Która czcionka była wymagana
Aby stwierdzić, której czcionki zażądał (twórca strony), narzędzia takie jak wbudowany Firefox Page Inspector lub jego rozszerzenie Firebug pomagają sprawdzać reguły CSS. Takie narzędzia nie informują, która czcionka jest faktycznie używana , ale pokazuje, która czcionka jest wymagana dla określonego regionu, a nawet określonego słowa, biorąc pod uwagę arkusz stylów CSS:
Powyżej pokazuje Firebug. Najpierw wybierz „Pokaż styl obliczony” z menu Styl po prawej stronie. Następnie kliknij przycisk strzałki po lewej stronie. A następnie po prostu kliknij interesujący Cię tekst. Spowoduje to zaktualizowanie informacji o arkuszu stylów CSS po prawej stronie. Zobacz funkcje, aby dowiedzieć się o funkcjach CSS.
Niektóre Firebug Lite są również dostępne dla innych przeglądarek, ale nigdy tego nie używałem.
Inspektor WWW w Safari i Narzędzia dla programistów w Chrome mają podobne opcje. (W przeglądarce Safari włącz Inspektora internetowego za pomocą preferencji: Pokaż menu rozwijania na pasku menu .) Internet Explorer ma narzędzia F12 .
Jak zauważono w e-t172 : pasek narzędzi dla programistów stron internetowych dla Firefoksa może również wyświetlać te informacje. Jednak CSS »Wyświetl informacje o stylu nie pokazuje żadnych„ odziedziczonych ”(„ kaskadowych ”) stylów, a jedynie informacje specyficzne dla klikniętego regionu. Zamiast tego, aby uzyskać rodzaj nakładki i zobaczyć informacje o czcionce, możesz użyć Informacje »Wyświetl informacje o elemencie. To pokaże szczegóły za każdym razem, gdy gdzieś klikniesz na stronie.
źródło
Jeśli używasz przeglądarki Firefox, istnieje dodatek Font Finder . Robi w zasadzie to, co opisał Maxim Z. w swojej odpowiedzi , ale automatycznie, więc jest naprawdę łatwy w użyciu ..
źródło
To zdecydowanie najlepsze rozwiązanie, z jakim się spotkałem. Jest to bookmarklet / rozszerzenie, które w 99% przypadków powie z całą pewnością, jakiej czcionki używa, porównując piksele wyświetlanego tekstu z pikselami każdej dostępnej czcionki, w tym czcionek TypeKit i Google Font API.
Narzędzie WhatFont
Sprawdź to.
źródło
font-family: sans-serifto jest to również zgłaszane - ale samo w sobie nie jest to czcionka. Podczas używaniafont-family: someUnknownFontotrzymuję(default font)wynik, który jest tak naprawdę Times na moim komputerze Mac. (Testowane z bookmarkletem, używając tego JS Bin ; zrzut ekranu .) Mimo wszystko: fajnie!window.getComputedStyledo uzyskania obliczonej rodziny czcionek. Następnie iteruje ten stos, porównując piksele każdej czcionki z wyświetlanymi pikselami. Pierwsze dopasowanie jest tym, które jest wyświetlane kursywą w wyskakującym okienku, pozostałe są wyświetlane normalnie. Jeśli nie ma dopasowania, wyświetli się(default font). Powodem, dla którego widzisz,sans-serifjest to, że poprawnie dopasowuje go dosans-serifczcionki, ale obecnie nie rozpoznaje już więcej.Nie znam żadnego oprogramowania. Właśnie użyłem Internet Explorera i stwierdziłem, że użyto czcionki:
To jest główna czcionka. Przeszukiwanie arkusza stylów w celu znalezienia czegokolwiek w rodzinie czcionek zapewni resztę.
Proces:
Jeśli szukasz czcionki w obrazach, która nie będzie zdefiniowana poza obrazem.
Tak, byłem bardzo znudzony. W końcu jest piątek po południu. Nie opublikowałem linku, ponieważ regularnie aktualizują arkusz stylów.
źródło
georgiaitimes new romansą kroje. Co więc oznacza wynik? Kombinacja tych dwóch krojów pisma?Możesz użyć rozszerzenia Firefox dla webmasterów, aby zobaczyć wszystkie style używane przez określoną część strony internetowej. Skorzystaj z menu CSS, Wyświetl informacje o stylu. Następnie kliknij tekst, który chcesz przeanalizować i wyszukaj w wynikach właściwość „rodzina czcionek”.
źródło
W przeciwieństwie do tego, co mówi wiele osób, NIE zawsze jest to tylko kwestia przeglądania źródła itp. - zależy od tego, czy CSS znajduje się w dokumencie, czy w zewnętrznym pliku css. Jeśli jest zewnętrzny, nie możesz po prostu wyświetlić źródła i znaleźć znacznika rodziny czcionek, ponieważ tak naprawdę nie ma go w pliku.
Plakat zalecający korzystanie z Google Chrome faktycznie dał bardzo dobrą wskazówkę - nauczyłem się tutaj czegoś i chciałem dodać dodatkową wskazówkę. W narzędziach programistycznych pojawiających się w Chrome MUSISZ kliknąć „Styl obliczony”, a następnie kliknąć pole wyboru „Pokaż odziedziczone”, a następnie przewinąć w dół, zanim go znajdziesz - jest to skrajny przykład, ale to, gdzie pokazuje, zależy od jak zbudowana jest strona.
źródło
Oto proste, ale wydajne rozwiązanie: bookmarklet pokazujący konfigurację zastosowaną do elementu (w tym rodziny czcionek).
Jesse Bookmarklety strony ma dobry dla tego zadania:
computed styles.Proszę bardzo: https://www.squarefree.com/bookmarklets/webdevel.html#computed_styles
źródło
jeśli to nie jest wbudowany css, po prostu otwórz stronę w widoku źródłowym. Skopiuj adres css, taki jak „/themes/01.css”, wklej na adres URL przeglądarki. Skopiuj wklej zwrotny w edytorze tekstu lub edytorze css. Użyj polecenia find, aby poprawić czcionkę lub rodzinę czcionek. Wymieniona rodzina czcionek używana do wyświetlania czcionki strony dla rozmiaru i innych atrybutów, takich jak pogrubienie, kursywa itp.
Dzięki Doronto
źródło