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ć:
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.
p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}
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!
