Jaki font (czcionka) został użyty na stronie?

Kategoria wpisu Frontend, Kursy, Przeglądarki internetowe Tagi: , , , , , on przez .



Zastanawiałeś się kiedyś po wejściu na jakąś stronę jakiego kroju fontu (czcionki elektronicznej) na niej użyto. Zapewne spotkało cię to już nieraz w końcu obecnie istnieje wiele ciekawych fontów, które można umieścić na stronie internetowej. W brew pozorom ustalenie jaki to krój czcionki nie jest w cale trudne – powiedziała bym, że jest bardzo proste. Nie musisz też specjalnie instalować jakiś programów.

Jak sprawdzić nazwę fonta?

Na początek uruchamiamy przeglądarkę internetową Google Chrome i otwieramy w niej witrynę, na której chcemy sprawdzić krój czcionki.

Następnie klikamy prawym klawiszem myszy w tekst z interesującą nas czcionką. W nowo wyświetlonym panelu wybieramy opcje „ZBADAJ”.

krój czcionki

krój czcionki

 

W nowo otwartym panelu zobaczycie teraz kilka kolumn zawierających różne informacje o stronie (np. kod strony, błędy w witrynie).

Kod HTML strony z zaznaczonym sprawdzanym elementem

Nas jednak interesuje pole mieszczące się po prawej stronie.

prawy panel z stylami css

prawy panel z stylami CSS

W polu tym powinny znajdować się informacje os stylach CSS dotyczących sprawdzanego przez nas elementu.

rozszerzony panel

rozszerzony panel

Teraz przechodzimy do zakładki panelu Computed (druga zakładka po Styles). Tak jak na obrazku.

Dla wygody rozciągnęłam to pole, ale nie trzeba tego robić.

Jak widać nazwy właściwości są tutaj uporządkowane alfabetycznie, i zgodnie z tą zasadą szukamy parametru o nazwie „font-family„.

font-family

font-family

W tym momencie można już zobaczyć, że na omawianej stronie użyto czcionki „Oswald”. Klikając na umieszczoną z boku strzałkę możemy uzyskać nieco więcej informacji.

więcej szczegółów

więcej szczegółów

Dodatkowo informacja o foncie znajduje się również na samym dole tego panelu:

 

 

Jak widać sprawdzenie jakiego kroju jest font nie było trudne – trzeba było jedynie wiedzieć gdzie to sprawdzić.

 

Jak zamknąć panel?

W celu zamknięcia panelu klikamy na krzyżyk w górnym prawym rogu.

Dodatkowe uwagi

Po prawej stronie znajduje się przycisk z trzema kropkami – mieści  się  tam informacja o położeniu panelu – najprościej ustawić ją tak jak na obrazku.

położenie panelu

położenie panelu

 

Przeczytaj również

Jak rozpoznać font umieszczony na obrazku (zdjęciu... Zapewne każdy choć raz oglądając grafiki na stronach internetowych zastanawiał się jakiego fontu (tzw. czcionki) na niej użyto. Czasem są to proste fo...
Zmiana koloru zaznaczenia właściwość CSS ::selecti... Jak zapewne każdy zauważył podczas zaznaczania na stronie internetowej fragmentu tekstu tło pod nim zmienia on kolor np. na ciemno niebieski (w zależn...
Google fonts – fonty na twoją stronę interne... Jak pisałam we wcześniejszym artykule nie można umieszczać dowolnego fontu na stronie internetowej nie ryzykując tego że źle się wyświetli lub zostani...
Osobne style CSS do Google Chrome Ogólnie przyjmuje się że przeglądarki internetowe takie jak Chrome i Firefox mają takie same albo bardzo podobne style CSS. Czasem jednak zdarza się ż...