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

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.

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.

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 :

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

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:

Firefox 22+ pokaże Ci, która czcionka jest aktualnie używana , bez żadnych rozszerzeń.

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

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.

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

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

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ń!