List All Fonts skannaa minkä tahansa verkkosivun ja esittää täydellisen luettelon kaikista käytössä olevista fonttiperhejoukoista — CDN:istä ladatuista web-fonteista, itse isännöidyistä fonteista ja järjestelmäfonttien varavaihtoehdoista. Jokainen fontti näyttää reaaliaikaisen tekstiesikatselun, ladatut paksuudet ja tyylit, sitä käyttävien elementtien määrän sekä yhden napsautuksen kopioinnin CSS font-family-määrittelyä varten.
Aiemmin ihailemallasi verkkosivustolla käytettyjen fonttien tunnistaminen vaati elementtien tarkastelua yksitellen DevToolsissa, lasketun font-family-ominaisuuden tarkistamista tai selainlaajennusten käyttöä, jotka havaitsevat vain yhden fontin kerrallaan. List All Fonts antaa sinulle koko kuvan yhdessä näkymässä — jokainen sivulle ladattu ja käytetty fontti reaaliaikaisine tekstinäytteineen, jotka osoittavat täsmälleen miten kukin fontti renderöityy. Työkalu erottaa web-fontit (@font-face- tai Google Fonts -kautta ladatut) järjestelmäfonteista (Arial, Helvetica, Georgia jne.) ja näyttää koko font-family-pinon. Jokaiselle fontille näet mitkä paksuudet on ladattu (400, 600, 700), mitkä elementit käyttävät sitä ja mitä fonttikokoja on käytetty. Napsauta mitä tahansa fonttia kopioidaksesi sen CSS-määrittelyn — valmis liitettäväksi omaan projektiisi. Reaaliaikainen esikatselu käyttää sivun todellista fonttirenderöintiä, ei yleistä esikatselua, joten näet täsmälleen miltä fontti näyttää sivustolla käytetyillä koolla ja paksuuksilla.
Listaa jokaisen sivulla todella renderöidyn font-family-arvon, mukaan lukien web-fontit Google Fontsista, Adobe Fontsista tai mukautetuista @font-face-määrittelyistä sekä järjestelmäfonttien varavaihtoehdot. Näyttää löydettyjen yksilöllisten fonttiperhejoukkojen kokonaismäärän.
Jokainen fontti näytetään reaaliaikaisella tekstinäytteellä ("The quick brown fox jumps over the lazy dog"), joka renderöidään sivulle ladatun todellisen fonttitiedoston avulla. Näet todellisen renderöinnin — ei yleistä esikatselua.
Näet jokaiselle fontille, mitkä paksuudet on ladattu (Regular 400, Medium 500, SemiBold 600, Bold 700) ja ovatko kursiiviversiot saatavilla. Auttaa ymmärtämään fontin ladatun osajoukon.
Näet kuinka monta elementtiä sivulla käyttää kutakin fonttia. Eniten käytetty fontti on listattu ensimmäisenä. Tiedät mitkä fontit ovat ensisijaisia (leipäteksti) ja mitkä toissijaisia (käytetty vain muutamassa elementissä).
Napsauta mitä tahansa fonttimerkintää kopioidaksesi sen täydellinen CSS font-family-määrittely (esim. font-family: 'Inter', sans-serif) leikepöydällesi. Valmis liitettäväksi suoraan tyylitiedostoosi.
Jokainen fontti näyttää lähteensä: Google Fonts (tietyllä URL:lla), Adobe Fonts, itse isännöity (@font-face URL:lla) tai järjestelmäfontti. Tiedät täsmälleen mistä kukin fontti tulee.
Vieraile kauniilla typografialla varustetulla verkkosivustolla ja näe välittömästi jokainen sen käyttämä fontti — nimet, paksuudet ja mistä ne tulevat. Ei enää "mikä fontti tuo on?" -arvailua tai epäluotettavien fonttientunnistustyökalujen käyttöä.
Kuinka monta fonttia sivusi lataa? Onko fontteja, joita ladataan mutta ei käytetä? List All Fonts näyttää todellisen käytön — jos ladatulla fontilla on 0 sitä käyttävää elementtiä, se on hukkaan heitettyä kaistanleveyttä.
Dokumentoi projektisi typografia ajamalla List All Fonts jokaisella sivulla. Varmista, että oikeita fontteja ja paksuuksia käytetään johdonmukaisesti koko sivustolla — löydä irrallaiset font-family-määrittelyt.
Löysit fontin josta pidät, mutta se on maksullinen? Kopioi fontin nimi ja etsi ilmaisia vaihtoehtoja samankaltaisilla ominaisuuksilla. Reaaliaikainen esikatselu auttaa sinua muistamaan täsmälleen miltä se näytti.
Aja List All Fonts samalla sivulla eri selaimissa varmistaaksesi, että samat fontit renderöityvät kaikkialla. Järjestelmäfonttipinot ratkeavat eri tavoin eri käyttöjärjestelmissä — tunnista epäjohdonmukaisuudet.
Avaa DevSuite Pro -kelluva telakka ja napsauta List All Fonts -kuvaketta. Työkalu skannaa sivun lasketut tyylit ja @font-face-säännöt.
Paneeli näyttää kaikki sivulta löytyneet fontit järjestettynä käyttötaajuuden mukaan. Jokainen merkintä näyttää fontin nimen, esikatselutekstin, paksuudet ja elementtimäärän.
Selaa reaaliaikaisia esikatseluja nähdäksesi miten kukin fontti renderöityy. Vertaile sivun otsikkofonttia, leipätekstifonttia ja korostusfonttia keskenään.
Napsauta mitä tahansa fonttimerkintää kopioidaksesi sen font-family CSS-määrittelyn. Napsauta lähdelinkkiä vieraillaksesi fontin alkuperässä (Google Fonts -sivu, CDN URL jne.).
Liitä font-family-määrittely CSS-koodiisi ja lataa fontti samasta lähteestä käyttääksesi sitä omassa projektissasi.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
