Jak mogę określić, jakiej czcionki używa przeglądarka do renderowania tekstu?

175

Mój CSS określa „ font-family: Helvetica, Arial, sans-serif;” dla całej strony. Wygląda na to, że w niektórych częściach używana jest Verdana. Chciałbym móc to zweryfikować.

Próbowałem skopiować i wkleić z mojej przeglądarki do Worda, ale to nie zachowuje czcionki.

Czy istnieje sposób na określenie, która czcionka jest faktycznie używana w sekcji tekstu?

Firebug poda mi listę czcionek jak powyżej [1], ale nie widzę sposobu, aby określić, która z czcionek jest używana.

  1. Okazuje się, że użyto złej listy, co rozwiązało mój pierwotny problem z Verdaną. Ale nadal jestem ciekawy, czy istnieje sposób na zidentyfikowanie rzeczywistej czcionki renderującej.
lavaturtle
źródło
FontFinder i WhatFont opisane w odpowiedziach poniżej są nadal bardzo prostymi sposobami wykrywania używanej czcionki. Obaj błędnie wskazali „Quanttrocentro Sans” (podstawową czcionkę), gdy wybiorę ؋symbol Aghani, który nie jest dostępny w tej czcionce.
Przepełnienie pytań
@QuestionOverflow, obecnie Firefox i Chrome mają wbudowane narzędzia do określania czcionki. Oni będą pokazać czcionkę dla każdego glifu, stąd pokaże jaka czcionka została wykorzystana do tego ؋ również.
Arjan
@Arjan: czy tak będzie nadal w 2020 roku?
pożarł elizjum
@devouredelysium, czy widziałeś moją odpowiedź ? Po prostu wybierz pojedynczy glif, aby zobaczyć, jaka czcionka jest używana.
Arjan

Odpowiedzi:

50

Zgodnie z odpowiedzią Wilfreda Hughesa , Firefox obsługuje teraz to natywnie. Ten artykuł zawiera więcej szczegółów .

Ta oryginalna odpowiedź odnosiła się do wtyczki „Font Finder”, ale tylko dlatego, że była sprzed 4 lat. Fakt, że stare odpowiedzi pozostają w ten sposób, a społeczność nie może ich zaktualizować, jest jednym z niewielu pozostałych błędów przepełnienia stosu.

Jeremy Kauffman
źródło
7
Nie ma powodu, aby z tego korzystać teraz, gdy Narzędzia Firefoksa> Projektant stron internetowych> Inspektor> Czcionki mówią ci (odpowiedź Wilfreda Hughesa)
narciarza
1
Niestety, Firefox 47 nie ma już zakładki Czcionki, do której odwołuje się ten blog, do którego prowadziło
łącze
3
„Począwszy od Firefoksa 47, widok Czcionki jest domyślnie wyłączony. Pracujemy nad bardziej w pełni funkcjonalnym zamiennikiem. Na razie, jeśli chcesz zobaczyć widok Czcionki, wejdź na about: config, znajdź preferencje devtools. fontinspector.enabled i ustaw go na true. " Zobacz developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/… .
Daniel Le,
1
Najwyraźniej ustawienie devtools.fontinspector.enabledbyło potrzebne tylko w Firefoksie 47: „w Firefoksie 47 tylko , widok czcionek jest domyślnie wyłączona Jeśli chcesz zobaczyć Czcionki zobaczyć w Firefoksie 47, wizyty. about:config, Znaleźć preferencje devtools.fontinspector.enabledi ustaw go trueprzed i po. Firefox 47, widok czcionek jest domyślnie włączony. " , @DanielLe.
Arjan
1
@DanielLe, oczywiście zrozumiałem, że w momencie kopiowania tekstu było to poprawne :-)
Arjan
151

Obecnie Chrome i Firefox mają wbudowane narzędzia do tego, ale Safari wymaga, abyś skopiował jakiś tekst i zbadał to.

Najpierw wybierz tekst. W przeglądarce Firefox Inspektor stron ma widok Czcionki :

Widok czcionek Firefox

Dzięki temu dowiesz się również, czy czcionki zostały pobrane i jaki styl jest używany, na przykład Regular, ExtraLight, Italic, BoldItalic i wszystkie.

W przeglądarce Chrome przejdź do „Elementów” DevTools, przejdź do zakładki „Obliczone” i przewiń w dół do sekcji „Renderowane czcionki”. W przeciwieństwie do przeglądarki Firefox, pokazuje tylko podstawową nazwę czcionki, a nie określony styl, którego może używać:

Inspektor sieci Chrome

Powyższe zrzuty ekranu pokazują, że dla tekstu Unicode może być wyświetlanych wiele czcionek. Chrome informuje, że 6 glifów („Pekka” i spacja) używa „Arial”, a jeden („웃”) używa „Apple SD Gothic Neo”:

Arial - plik lokalny (6 glifów)
Apple SD Gothic Neo - plik lokalny (1 glif)

Rzeczywisty CSS definiuje:

font-family: Arial,"Helvetica Neue",Helvetica,sans-serif

Ale te czcionki często nie zawierają wielu znaków specjalnych. Ponieważ informacje o czcionkach działają na element HTML, gdzie tekst Unicode w elemencie może faktycznie używać wielu czcionek, wyświetla również wiele czcionek. W razie wątpliwości wystarczy dwukrotnie kliknąć tekst w panelu HTML i pozbyć się tekstu, który Cię nie interesuje. Następnie, po ponownym wybraniu otaczającego elementu, zobaczysz tylko jedną opcję. W tym przypadku oznaczałoby to, że obie przeglądarki używały „Apple SD Gothic Neo Regular” jako znaku „웃”.

Niestety, różne przeglądarki (a nawet różne wersje jednej przeglądarki) na tym samym komputerze mogą używać różnych czcionek ze względu na typy czcionek obsługiwane / preferowane przez przeglądarkę. Na przykład na komputerze Mac Safari może preferować zaawansowaną technologię Apple, podczas gdy Firefox obsługuje Microsoft OpenType (co może powodować problemy w języku arabskim po zainstalowaniu pakietu Microsoft Office na komputerze Mac). Lub dla znaku „웃” na powyższych zrzutach ekranu, Chrome i Firefox na moim Macu preferują obecnie „Apple SD Gothic Neo” (czyli OpenType PostScript), ale starsze wersje Firefoksa używają zamiast tego „AppleGothic Regular” (który jest czcionką TrueType) .

W przypadku przeglądarek, które nie mają podobnego widoku czcionek, po prostu skopiuj i wklej fragment tekstu do edytora tekstu lub edytora tekstu sformatowanego, wybierz określony tekst i zobacz, która nazwa pojawia się na liście rozwijanej czcionek. Na moim Macu to nie działa podczas wklejania z Firefoksa (gdzie „웃” Firefox „Apple SD Gothic Neo” jest konwertowany na „AppleMyungjo” podczas wklejania), ale działa dobrze w Safari i Chrome:

Tekst wklejony z przeglądarki do edytora tekstu sformatowanego

Arjan
źródło
1
Czy wiesz, czy Safari ma wtyczkę, czy coś do tego?
Andry
4
W Chrome 47 przewiń do dołu sekcji Obliczone. Rozwinięcie font-familyatrybutu tak, jak się pojawia (w kolejności alfabetycznej) nie spowoduje wyświetlenia ładowanej czcionki. Ta informacja pojawia się na dole.
Merchako
1
@Merchako, Co się dzieje, gdy Twoja obliczona czcionka jest czcionką ogólną, taką jak „serif” i „sans-serif”? Jak więc otrzymujesz rzeczywistą czcionkę?
Pacerier
2
@Pacerier, w Chrome po prostu przewiń w dół na karcie Obliczone; w przeglądarce Firefox zobacz osobną kartę.
Arjan
1
@TMG, mogę sobie wyobrazić, że czcionki internetowe mogą nie wymagać aliasu, ale mogą bezpośrednio odnosić się do jakiegoś adresu URL. Czy to jest publiczna witryna internetowa, którą możemy obejrzeć? Jeśli nie, co wyświetla Firefox?
Arjan
30

WhatFont to rozszerzenie przeglądarki Chrome, które powie ci konkretnie, która czcionka ze stosu czcionek jest ładowana.

user1100745
źródło
6
Dla mnie mówi, jaka czcionka jest zadeklarowana, ale nie mówi, jaka czcionka jest faktycznie używana.
panzi,
3
Zgodnie z tym artykułem ( updates.html5rocks.com/2013/09/… ), Dev Tools może teraz powiedzieć, jaka jest rzeczywista renderowana czcionka.
yorch
WhatFont próbuje wykryć renderowaną czcionkę, ale wydaje się, że nie jest to skuteczne github.com/chengyin/WhatFont-Bookmarklet/issues/13
Chris
7

W przypadku aktualnych wersji Firefoksa (od wersji 7) istnieje dodatek o nazwie „fontinfo”, który zgłasza faktyczną używaną czcionkę (zamiast tego, co mówi właściwość rodziny czcionek CSS), biorąc pod uwagę przypadki, w których przeglądarka powraca do inną czcionkę, ponieważ żądana rodzina czcionek nie była dostępna lub nie obsługiwała znaków użytych w tekście.

Jonathan
źródło
W tej chwili jest to najlepsza odpowiedź
Ingo Kegel
1

Możesz spróbować sprawdzić tę konkretną sekcję za pomocą Firebug dla Firefoksa. Powinien dać ci wszystkie dokładne właściwości.

jeroen
źródło
To wciąż daje mi listę, a nie konkretną, której używa ... Ale po drugim sprawdzeniu Verdana w jakiś sposób znalazła się na liście rodzin czcionek, co byłoby przyczyną mojego pierwotnego problemu. Więc dziękuję.
lavaturtle
1
Firebug powie Ci również, które reguły są uruchamiane, aby nadać elementowi tę czcionkę - bardzo przydatne do ustalenia, gdzie twój CSS działa nieprawidłowo.
RichieHindle
Safari 4 Beta ma też WebInspector (może to być firebug ze skórą)
vikingosegundo
1
Myślę, że zawsze otrzymasz pełną listę, niezależnie od używanego narzędzia. Użyta czcionka jest pierwszą na liście zainstalowaną na komputerze.
jeroen
2
Obecnie Firebug (1.11.4, być może wcześniej) podświetla aktualną czcionkę na niebiesko.
Mark Vrabel
1

Wtyczka „FontFinder”, o której wspomniał jeremy, wydaje się nie działać tutaj, podając pierwszą czcionkę z listy CSS niezależnie od faktycznie renderowanej czcionki (Firefox 4.0rc1 w systemie Linux). Wygląda na to, że poniższa wtyczka zapewnia jednak „właściwą” czcionkę.

Czcionka kontekstowa

Dave Vogt
źródło
Niestety, nawet czcionka kontekstowa pokazuje tylko obliczoną rodzinę CSS, która może być na przykład szeryfowa lub bezszeryfowa. Co więcej, jeśli jakiś znak nie jest obecny w obliczonej czcionce, a przeglądarka wybiera go z innej czcionki, czcionka kontekstowa nadal pokazuje obliczoną rodzinę czcionek, a nie prawdziwą czcionkę.
Jukka K. Korpela
0

Opierając się na podejściu do pomiaru tekstu i skrypcie z Lalit Patel, stworzyłem bookmarklety, które mogą odgadnąć czcionkę używaną dla aktualnie zaznaczonego tekstu (lub body, jeśli nic nie jest zaznaczone). Wydaje mi się, że bardzo dobrze sprawdza się przy określaniu używanej czcionki ze stosu! (Nie może jednak powiedzieć, do czego sans-serifwłaściwie jest mapowane).

Chwyć je tutaj: https://alanhogan.com/bookmarklets#font-stack-full

Źródło znajduje się na GitHub .

Zobacz także: ten CodePen , który używa głównie tego samego kodu. Spróbuj, wybierając różne akapity i obserwując aktualizację tabeli / przypuszczeń!

Alan H.
źródło