A List All Fonts átvizsgál egy weboldalt, és teljes leltárt készít minden használt betűtípuscsaládról — CDN-ekről betöltött webes betűtípusokról, saját szerveren tárolt betűtípusokról és rendszer-betűtípus tartalékokról. Minden betűtípushoz élő szöveges előnézet, a betöltött vastagságok és stílusok, az azt használó elemek száma, valamint egykattintásos másolás tartozik a CSS font-family deklarációhoz.
Egy csodált weboldal betűtípusainak azonosítása korábban elemenkénti vizsgálatot igényelt a DevTools-ban, a számított font-family tulajdonság ellenőrzését, vagy olyan böngészőbővítmények használatát, amelyek egyszerre csak egy betűtípust észlelnek. A List All Fonts egyetlen nézetben adja meg a teljes képet — az oldalon betöltött és használt minden betűtípust, élő szövegmintákkal, amelyek pontosan mutatják, hogyan jelenik meg mindegyik. Az eszköz különbséget tesz a webes betűtípusok (@font-face vagy Google Fonts útján betöltve) és a rendszer-betűtípusok (Arial, Helvetica, Georgia stb.) között, megmutatva a teljes font-family stacket. Minden betűtípusnál látja, mely vastagságok vannak betöltve (400, 600, 700), mely elemek használják, és milyen betűméretekkel jelennek meg. Kattintson bármely betűtípusra a CSS-deklarációjának másolásához — készen áll a saját projektjébe illesztésre. Az élő előnézet az oldalon ténylegesen betöltött betűtípus-fájlt használja, nem egy általános előnézetet, tehát pontosan látja, hogyan néz ki a betűtípus az oldalon használt méretekben és vastagságokban.
Felsorol minden ténylegesen megjelenített font-family-t az oldalon, beleértve a Google Fonts, Adobe Fonts vagy egyéni @font-face deklarációkból származó webes betűtípusokat és a rendszer-betűtípus tartalékokat is. Megmutatja a talált egyedi betűtípuscsaládok teljes számát.
Minden betűtípus élő szövegmintával jelenik meg ("The quick brown fox jumps over the lazy dog"), az oldalon ténylegesen betöltött betűtípusfájllal megjelenítve. Valódi renderelést lát — nem egy általános előnézetet.
Minden betűtípusnál látja, mely vastagságok vannak betöltve (Regular 400, Medium 500, SemiBold 600, Bold 700), és elérhetők-e dőlt változatok. Segít megérteni a betűtípus betöltött részhalmazát.
Lássa, hány elem használja az oldalon az egyes betűtípusokat. A leggyakrabban használt betűtípus szerepel elsőként. Tudja meg, mely betűtípusok elsődlegesek (szövegtörzs) és melyek másodlagosak (csak néhány elemen használva).
Kattintson bármely betűtípus bejegyzésére a teljes CSS font-family deklaráció (pl. font-family: 'Inter', sans-serif) vágólapra másolásához. Készen áll közvetlenül a stíluslapba illesztésre.
Minden betűtípus megmutatja a forrását: Google Fonts (a konkrét URL-lel), Adobe Fonts, saját szerveren tárolt (az @font-face URL-lel) vagy rendszer-betűtípus. Pontosan tudja, honnan származik az adott betűtípus.
Látogasson meg egy gyönyörű tipográfiájú weboldalt, és azonnal lássa az összes használt betűtípust — neveket, vastagságokat és eredetüket. Nincs több "vajon ez milyen betűtípus?" találgatás vagy megbízhatatlan betűtípus-azonosító eszközök használata.
Hány betűtípust tölt be az oldala? Vannak letöltött, de nem használt betűtípusok? A List All Fonts a tényleges használatot mutatja — ha egy betöltött betűtípust 0 elem használ, az elpazarolt sávszélesség.
Dokumentálja a projektje tipográfiáját a List All Fonts minden oldalon való futtatásával. Ellenőrizze, hogy a megfelelő betűtípusokat és vastagságokat következetesen használják-e az egész oldalon — fogja el a szabálytalan font-family deklarációkat.
Talált egy betűtípust, ami tetszik, de fizetős? Másolja ki a betűtípus nevét, és keressen hasonló jellemzőjű ingyenes alternatívákat. Az élő előnézet segít pontosan felidézni, hogyan nézett ki.
Futtassa a List All Fonts-ot ugyanazon az oldalon különböző böngészőkben, hogy ellenőrizze, mindenhol ugyanazok a betűtípusok jelennek-e meg. A rendszer-betűtípus stackek operációs rendszerenként eltérően oldódnak fel — fogja el az eltéréseket.
Nyissa meg a DevSuite Pro lebegő dokkját, és kattintson a List All Fonts ikonra. Az eszköz átvizsgálja az oldal számított stílusait és @font-face szabályait.
Megjelenik egy panel az oldalon talált összes betűtípussal, használati gyakoriság szerint rendezve. Minden bejegyzés megmutatja a betűtípus nevét, az előnézeti szöveget, a vastagságokat és az elemek számát.
Görgessen végig az élő előnézeteken, hogy lássa, hogyan jelenik meg mindegyik betűtípus. Hasonlítsa össze az oldal címsor-betűtípusát a szövegtörzs- és a kiemelő-betűtípussal.
Kattintson bármely betűtípus bejegyzésére a font-family CSS-deklarációjának másolásához. Kattintson a forrás hivatkozásra a betűtípus eredetének felkereséséhez (Google Fonts oldal, CDN URL stb.).
Illessze be a font-family deklarációt a CSS-be, és töltse be a betűtípust ugyanabból a forrásból, hogy felhasználja a saját projektjében.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 64+ fejlesztői eszközt böngészőjéhez.
