Orodhesha Fonti Zote inakagua ukurasa na kuwasilisha orodha kamili ya kila familia ya fonti inayotumika.
Kutambua fonts kwenye tovuti unayoipenda hapo awali kulihitaji kukagua elements moja baada ya nyingine kwenye DevTools, kuangalia computed font-family property, au kutumia extensions za kivinjari zinazotambua font moja tu kwa wakati. List All Fonts inakupa picha kamili katika mwonekano mmoja — kila font iliyopakiwa na kutumika kwenye ukurasa, ikiwa na sampuli za maandishi hai zinazoonyesha hasa jinsi kila font inavyotolewa (rendered).
Zana hii inatofautisha kati ya web fonts (zinazopakiwa kupitia @font-face au Google Fonts) na system fonts (Arial, Helvetica, Georgia, n.k.), ikionyesha font-family stack kamili. Kwa kila font, unaona weights zipi zimepakiwa, elements zipi zinaitumia, na ukubwa gani wa fonts umewekwa. Bofya font yoyote kunakili CSS declaration yake — tayari kubandikwa kwenye mradi wako mwenyewe.
Variable fonts — faili moja ya font inayojumuisha weights na widths mbalimbali badala ya kutoa faili tofauti kwa kila weight — zinatambuliwa kama variable na kuonyesha wigo wa axis unaosaidiwa badala ya kuorodheshwa kama weight moja fasta. Live preview inatumia rendering halisi ya font kutoka ukurasa, si preview ya kawaida, hivyo unaona hasa jinsi font inavyoonekana katika ukubwa na weights zinazotumika kwenye tovuti hiyo.
Inaorodhesha kila familia ya fonti (font-family) inayotolewa kwenye ukurasa, ikiwa ni pamoja na fonti za wavuti kutoka Google Fonts, Adobe Fonts, au matangazo ya msimbo ya @font-face, na fonti mbadala za mfumo. Inaonyesha jumla ya familia za fonti za kipekee zilizopatikana.
Kila fonti inaonyeshwa na sampuli ya maandishi ya moja kwa moja ("The quick brown fox jumps over the lazy dog") inayotolewa kwa kutumia faili halisi ya fonti iliyopakiwa kwenye ukurasa. Unaona utoaji halisi — si hakikisho la kawaida.
Kwa kila fonti, angalia ni uzito gani umepakiwa (Regular 400, Medium 500, SemiBold 600, Bold 700) na ikiwa matoleo ya italiki yanapatikana. Inakusaidia kuelewa sehemu ya fonti iliyopakiwa.
Angalia ni vipengele vingapi kwenye ukurasa vinavyotumia kila fonti. Fonti inayotumika zaidi inaorodheshwa kwanza. Jua ni fonti gani za msingi (maandishi ya mwili) na zipi za upili (zinazotumika kwenye vipengele vichache tu).
Bofya ingizo lolote la fonti ili kunakili tamko lake kamili la CSS font-family (mfano, font-family: 'Inter', sans-serif) kwenye clipboard yako. Tayari kubandikwa moja kwa moja kwenye stylesheet yako.
Kila fonti inaonyesha chanzo chake: Google Fonts (pamoja na URL maalum), Adobe Fonts, inayojihifadhi (self-hosted) (pamoja na URL ya @font-face), au fonti ya mfumo. Jua haswa kila fonti inatoka wapi.
Tembelea tovuti yenye muundo mzuri wa kimaandishi na uone mara moja kila fonti inayotumika — majina, uzito, na zinatoka wapi. Hakuna tena kukisia "hiyo ni fonti gani?" au kutumia zana za utambulisho wa fonti zisizoaminika.
Je, ukurasa wako unapakia fonti ngapi? Je, kuna fonti zisizotumika zinazopakuliwa lakini hazitumiwi? Orodhesha Fonti Zote inaonyesha matumizi halisi — ikiwa fonti iliyopakiwa ina vipengele 0 vinavyoitumia, hiyo ni upotezaji wa bandwidth.
Andika muundo wa kimaandishi wa mradi wako kwa kuwasha Orodhesha Fonti Zote kwenye kila ukurasa. Thibitisha kuwa fonti na uzito sahihi vinatumika kwa uthabiti kwenye tovuti — pata matamko ya font-family yasiyofaa.
Umetambua fonti unayoipenda lakini ni fonti ya kulipia? Nakili jina la fonti na utafute mbadala wa bure wenye sifa zinazofanana. Hakikisho la moja kwa moja linakusaidia kukumbuka haswa jinsi ilivyoonekana.
Washa Orodhesha Fonti Zote kwenye ukurasa ule ule katika vivinjari tofauti ili kuthibitisha kuwa fonti zile zile zinatolewa kila mahali. Fonti za mfumo hutatuliwa tofauti kwenye mifumo tofauti ya uendeshaji — pata kutofautiana.
Fungua kizimbani kinachoelea cha DevSuite Pro na ubofye ikoni ya List All Fonts. Chombo kinakagua mitindo iliyokokotolewa (computed styles) na sheria za @font-face za ukurasa.
Jopo linaonyesha fonti zote zilizopatikana kwenye ukurasa, zilizopangwa kwa marudio ya matumizi. Kila ingizo linaonyesha jina la fonti, maandishi ya hakikisho, uzito, na idadi ya vipengele.
Sogeza kupitia hakikisho za moja kwa moja ili kuona jinsi kila fonti inavyotolewa. Linganisha fonti ya kichwa dhidi ya fonti ya mwili dhidi ya fonti ya msisitizo (accent).
Bofya ingizo lolote la fonti ili kunakili tamko lake la CSS font-family. Bofya kiungo cha chanzo ili kutembelea asili ya fonti (ukurasa wa Google Fonts, URL ya CDN, n.k.).
Bandika tamko la font-family kwenye CSS yako na upakie fonti kutoka chanzo kile kile ili kuitumia katika mradi wako mwenyewe.
Sakinisha DevSuite Pro bila malipo na ufungue zana 64+ za wasanidi kwa kivinjari chako.
