Loetele Kõik Fondid skannib mis tahes veebilehe ja esitab täieliku loetelu kõigist kasutatatest fondi perekondadest — CDN-idest laaditud veebifondid, isehostitavad fondid ja süsteemi fontide varukoopiad. Iga font näitab otseülekande tekstieelvaadet, laaditud kaale ja stiile, seda kasutavate elementide arvu ja ühe klõpsuga koopiat CSS font-family deklaratsiooni jaoks.
Imetletud veebisaidil fontide tuvastamine nõudis varem elementide ükshaaval inspekteerimist DevToolsis, arvutatud font-family omaduse kontrollimist või brauseri laiendite kasutamist, mis tuvastavad ainult ühe fondi korraga. Loetele Kõik Fondid annab täieliku pildi ühes vaates — iga font laaditud ja kasutatud lehel, koos otsülekande tekstinäidistega, mis näitavad täpselt, kuidas iga font renderdub. Tööriist eristab veebifonte (laaditud @font-face kaudu või Google Fontsist) ja süsteemifonte (Arial, Helvetica, Georgia jne), näidates täielikku font-family virna. Iga fondi puhul näed, millised kaalud on laaditud (400, 600, 700), millised elemendid seda kasutavad ja milliseid fondisuurusi rakendatakse. Klõpsa mis tahes fondil, et kopeerida selle CSS deklaratsioon — valmis kleepimiseks oma projekti. Otseülekande eelvaade kasutab lehe tegelikku fondi renderdamist, mitte üldist eelvaadet, nii et näed täpselt, kuidas font näeb välja saidil kasutatud suurustes ja kaaludes.
Loetleb iga font-family, mis tegelikult lehel renderdub, sh veebifondid Google Fontsist, Adobe Fontsist või kohandatud @font-face deklaratsioonidest, ja süsteemi fontide varukoopiad. Näitab leitud unikaalsete fontide perekondade koguarvu.
Iga font kuvatakse otseülekande tekstinäidisega ("The quick brown fox jumps over the lazy dog"), mis renderdatakse lehel laaditud tegeliku fontifaili abil. Näed tegelikku renderdamist — mitte üldist eelvaadet.
Iga fondi puhul vaata, millised kaalud on laaditud (Regular 400, Medium 500, SemiBold 600, Bold 700) ja kas kursiiv variandid on saadaval. Aitab sul mõista fondi laaditud alamhulka.
Vaata, mitu elementi lehel kasutab iga fonti. Kõige enam kasutatud font on loetletud esimesena. Tea, millised fondid on esmased (põhitekst) ja millised teisesed (kasutatavad vaid mõnel elemendil).
Klõpsa mis tahes fondi kirjel, et kopeerida selle täielik CSS font-family deklaratsioon (nt font-family: 'Inter', sans-serif) lõikelauale. Valmis kleepimiseks otse oma stiilitabelisse.
Iga font näitab oma allikat: Google Fonts (konkreetse URL-iga), Adobe Fonts, isehostitav (koos @font-face URL-iga) või süsteemifont. Tea täpselt, kust iga font pärineb.
Külasta veebisaiti kaunite trükiomaduste ja näe koheselt iga fonti, mida see kasutab — nimed, kaalud ja kust need pärinevad. Enam pole "mis font see on?" arvamist ega ebausaldusväärsete fontide tuvastamise tööriistade kasutamist.
Kui palju fonte sinu leht laadib? Kas on kasutamata fonte, mis laaditakse alla, kuid ei rakendata? Loetele Kõik Fondid näitab tegelikku kasutust — kui laaditud fondil on 0 seda kasutavat elementi, on see raisatud ribalaius.
Dokumenteeri oma projekti tüpograafia, käivitades Loetele Kõik Fondid igal lehel. Kontrolli, et õigeid fonte ja kaale kasutataks kogu saidil järjepidevalt — püüa kinni vildakad font-family deklaratsioonid.
Tuvastasid meeldiva fondi, kuid see on tasuline font? Kopeeri fondi nimi ja otsi sarnaste omadustega tasuta alternatiive. Otseülekande eelvaade aitab täpselt meenutada, kuidas see nägi välja.
Käivita Loetele Kõik Fondid samas lehes erinevates brauserites, et kontrollida, kas samad fondid renderduvad kõikjal. Süsteemi fontide virnalised lahenduvad erinevate operatsioonisüsteemide vahel erinevalt — tüüpige ebajärjepidevused.
Ava DevSuite Pro ujuv dokk ja klõpsa Loetele Kõik Fondid ikoonil. Tööriist skannib lehe arvutatud stiile ja @font-face reegleid.
Paneel kuvab kõiki lehel leitud fonte, sorteerituna kasutussageduse järgi. Iga kirje näitab fondi nime, eelvaate teksti, kaale ja elementide arvu.
Keri läbi otseülekande eelvaadete, et näha, kuidas iga font renderdub. Võrdle lehe pealkirja fonti vs põhifonti vs rõhufonti.
Klõpsa mis tahes fondi kirjel, et kopeerida selle font-family CSS deklaratsioon. Klõpsa allika lingil, et külastada fondi päritolu (Google Fontsi leht, CDN URL jne).
Kleebi font-family deklaratsioon oma CSS-i ja laadi font samast allikast, et kasutada seda oma projektis.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.
