فهرست همه فونتها هر صفحه وب را اسکن میکند و یک فهرست کامل از هر خانواده فونت در استفاده ارائه میدهد — فونتهای وب بارگذاریشده از CDNها، فونتهای self-hosted و fallbackهای فونت سیستم. هر فونت یک پیشنمایش متن زنده، وزنها و استایلهای بارگذاریشده، تعداد عناصر استفادهکننده از آن و کپی با یک کلیک برای اعلام CSS font-family نشان میدهد.
شناسایی فونتهای روی یک وبسایت که تحسین میکنید معمولاً نیاز به بررسی عناصر یک به یک در DevTools، بررسی ویژگی محاسبهشده font-family یا استفاده از افزونههای مرورگری که فقط یک فونت را در یک زمان شناسایی میکنند داشت. فهرست همه فونتها تصویر کامل را در یک نما ارائه میدهد — هر فونت بارگذاریشده و استفادهشده روی صفحه، با نمونههای متن زنده که دقیقاً نشان میدهند هر فونت چگونه رندر میشود. ابزار بین فونتهای وب (بارگذاریشده از @font-face یا Google Fonts) و فونتهای سیستم (Arial، Helvetica، Georgia و غیره) تمایز قائل میشود و پشته کامل font-family را نشان میدهد. برای هر فونت میبینید کدام وزنها بارگذاری شدهاند (400، 600، 700)، کدام عناصر از آن استفاده میکنند و چه اندازههای فونتی اعمال میشوند. روی هر فونت کلیک کنید تا اعلام CSS آن را کپی کنید — آماده paste در پروژه خودتان. پیشنمایش زنده از رندر واقعی فونت از صفحه استفاده میکند، نه یک پیشنمایش عمومی، بنابراین دقیقاً میبینید فونت با اندازهها و وزنهای استفادهشده روی سایت چگونه به نظر میرسد.
هر font-family که واقعاً روی صفحه رندر شده را فهرست میکند، از جمله فونتهای وب از Google Fonts، Adobe Fonts یا اعلامهای @font-face سفارشی و fallbackهای فونت سیستم. تعداد کل خانوادههای فونت منحصربهفرد یافتشده را نشان میدهد.
هر فونت با یک نمونه متن زنده («The quick brown fox jumps over the lazy dog») رندرشده با استفاده از فایل فونت واقعی بارگذاریشده روی صفحه نمایش داده میشود. رندر واقعی را میبینید — نه یک پیشنمایش عمومی.
برای هر فونت، ببینید کدام وزنها بارگذاری شدهاند (Regular 400، Medium 500، SemiBold 600، Bold 700) و آیا واریانتهای ایتالیک موجود هستند. به شما کمک میکند زیرمجموعه بارگذاریشده فونت را درک کنید.
ببینید چه تعداد عنصر روی صفحه از هر فونت استفاده میکنند. پرکاربردترین فونت اول فهرست میشود. بدانید کدام فونتها اصلی (متن بدنه) و کدامها ثانوی (استفادهشده فقط در چند عنصر) هستند.
روی هر ورودی فونت کلیک کنید تا اعلام کامل CSS font-family آن (مثلاً font-family: 'Inter', sans-serif) را فوراً در clipboard کپی کنید. آماده paste مستقیم در stylesheet شما.
هر فونت منبع خود را نشان میدهد: Google Fonts (با URL خاص)، Adobe Fonts، self-hosted (با URL @font-face) یا فونت سیستم. دقیقاً بدانید هر فونت از کجا میآید.
از یک وبسایت با تایپوگرافی زیبا بازدید کنید و فوراً ببینید از چه فونتهایی استفاده میکند — نامها، وزنها و منشأ آنها. دیگر نیازی به حدس «این چه فونتی است؟» یا استفاده از ابزارهای غیرقابل اعتماد شناسایی فونت نیست.
صفحه شما چه تعداد فونت بارگذاری میکند؟ آیا فونتهای استفادهنشدهای هستند که دانلود میشوند اما اعمال نمیشوند؟ فهرست همه فونتها استفاده واقعی را نشان میدهد — اگر فونت بارگذاریشدهای ۰ عنصر استفادهکننده دارد، پهنای باند هدر رفته است.
تایپوگرافی پروژه خود را با اجرای فهرست همه فونتها روی هر صفحه مستند کنید. تأیید کنید که فونتها و وزنهای صحیح به طور ثابت در سراسر سایت استفاده میشوند — اعلامهای سرکش font-family را شناسایی کنید.
یک فونت دوستداشتنی شناسایی کردهاید اما یک فونت پولی است؟ نام فونت را کپی کنید و جایگزینهای رایگان با ویژگیهای مشابه را جستجو کنید. پیشنمایش زنده به شما کمک میکند دقیقاً به یاد بیاورید چگونه به نظر میرسید.
فهرست همه فونتها را روی همان صفحه در مرورگرهای مختلف اجرا کنید تا تأیید کنید که همان فونتها در همه جا رندر میشوند. پشتههای فونت سیستم در سیستمعاملهای مختلف متفاوت حل میشوند — ناسازگاریها را شناسایی کنید.
داک شناور DevSuite Pro را باز کرده و روی آیکون فهرست همه فونتها کلیک کنید. ابزار استایلهای محاسبهشده صفحه و قوانین @font-face را اسکن میکند.
یک پنل همه فونتهای یافتشده روی صفحه را بر اساس فرکانس استفاده مرتبشده نمایش میدهد. هر ورودی نام فونت، متن پیشنمایش، وزنها و تعداد عنصر را نشان میدهد.
از پیشنمایشهای زنده عبور کنید تا ببینید هر فونت چگونه رندر میشود. فونت عنوان صفحه را با فونت بدنه در مقابل فونت تأکیدی مقایسه کنید.
روی هر ورودی فونت کلیک کنید تا اعلام CSS font-family آن را کپی کنید. روی لینک منبع کلیک کنید تا از منشأ فونت بازدید کنید (صفحه Google Fonts، URL CDN و غیره).
اعلام font-family را در CSS خود paste کنید و فونت را از همان منبع بارگذاری کنید تا از آن در پروژه خودتان استفاده کنید.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.
