Aa
نام فونت را پیدا کنید
از تیتری خوشتان آمده؟ آن را انتخاب کنید تا خانواده، وزن و منبع فونت را ببینید: Google Fonts، Adobe Fonts یا خود سایت.
افزونه رایگان برای Chrome
این چه فونتی است؟ راستکلیک کنید و CSS را ببینید
متنی را در هر وب‌سایتی انتخاب کنید، راستکلیک کنید و «Inspect font with FontLens» را بزنید. پنل فونت‌یاب روی صفحه باز می‌شود و خانواده، اندازه، وزن، line-height و رنگ را همراه CSS آماده کپی و دکمه دانلود فونت نشان میدهد.
همچنین در Edge، Brave، Opera و سایر مرورگرهای Chromium کار میکند.
در یک نگاه
- چه کاری انجام میدهد
- فونت متن انتخاب‌شده را نشان میدهد: خانواده، اندازه، وزن، line-height، رنگ و سبک‌های متفاوت از حالت پیش‌فرض، همراه CSS آماده کپی.
- چطور شروع کنید
- متن را انتخاب کنید، راستکلیک کنید و «Inspect font with FontLens» را بزنید. این گزینه فقط هنگام انتخاب متن نمایش داده می‌شود.
- کپی به شکل
- CSS، SCSS، SASS یا Tailwind، با اندازه برحسب px، rem، pt یا em.
- فایل فونت
- گزینه «Download font» فونت وب را از منبع @font-face دریافت میکند. پیش از استفاده، مجوز فونت را بررسی کنید.
- مناسب برای
- طراحان وب، توسعه‌دهندگان فرانت‌اند، ارزیابان دسترس‌پذیری و دانشجویان CSS.
- قیمت
- رایگان. بدون نیاز به حساب کاربری، بدون نسخه پولی.
- داده‌ها
- در مرورگر شما اجرا می‌شود. بدون سرور و تحلیل داده؛ تنها درخواست شبکه مربوط به دانلود فونتی است که خودتان شروع میکنید.
- سازگار با
- Chrome و سایر مرورگرهای Chromium که از Chrome Web Store افزونه نصب میکنند. با Firefox و Safari کار نمی‌کند.
- محدودیت‌ها
- CSS متن واقعی در صفحات وب را میخواند؛ نه متن داخل تصویر، canvas یا PDF و نه صفحات خود Chrome را.
- نسخه
- 2.2.0، به‌روزرسانی‌شده در ۱ آبان ۱۴۰۵
دو کلیک تا پیدا کردن فونت
- 1
متن را انتخاب کنید
یک تیتر، پاراگراف یا برچسب دکمه در هر صفحه وب.
- 2
راستکلیک کنید
«Inspect font with FontLens» را انتخاب کنید. پنل روی صفحه باز می‌شود و خانواده، اندازه، وزن، line-height و رنگ را نشان میدهد.
- 3
کپی یا ویرایش کنید
CSS یا Tailwind را کپی کنید، در پیشنمایش زنده اندازه یا رنگ دیگری را امتحان کنید یا فایل فونت را دانلود کنید.
چرا از آن استفاده میکنند
{ }
با طرح هماهنگ کنید
مقادیر صفحه زنده را با فایل طراحی بسنجید و سپس قواعد را به شکل CSS، SCSS، SASS یا Tailwind کپی کنید.
4.5:1
کنتراست را بررسی کنید
نسبت کنتراست و نشانهای AA و AAA را ببینید و پیش از انتشار طرح، متن تیره‌تر یا پسزمینه روشن‌تری را امتحان کنید.
چه امکاناتی دارد
نمونه با خطوط راهنما
اولین خانواده فونت در پشته، میان خطوط راهنمای ارتفاع حروف بزرگ، ارتفاع x و خط پایه که از خود فونت اندازه‌گیری شده‌اند.
قالب‌های قطعه کد
CSS، SCSS، SASS و Tailwind. کل قطعه یا یک خط را کپی کنید؛ آخرین قالب شما به خاطر سپرده می‌شود.
واحدهای دلخواه شما
اندازه را در فیلدها و قطعه کد با px، rem، pt یا em ببینید. rem از اندازه ریشه همان صفحه پیروی میکند.
منبع فونت
نشان منبع فونت را مشخص میکند: Google Fonts، Adobe Fonts، میزبانی شخصی یا فونت سیستمی نصب‌شده روی رایانه شما.
بررسی کنتراست
نسبت میان متن و پسزمینه با نشانهای AA و AAA برای متن معمولی و بزرگ؛ با تغییر رنگ‌ها بهروز می‌شود.
دانلود فونت
فایل را از منبع @font-face می‌گیرد و با نام خانواده ذخیره میکند. اگر سرور مانع شود، منبع در زبانه‌ای تازه باز می‌شود.
چرا پیدا کردن فونت در DevTools این‌قدر زمان می‌برد؟
صفحه فهرستی از فونت‌ها تعریف میکند و مرورگر از نخستین فونتِ در دسترس استفاده میکند. برای فهمیدن اینکه کدام فونت به کار رفته، DevTools را باز میکنید، عنصر را پیدا میکنید، پنل Computed را می‌خوانید و بعد فایل فونت را در پنل Network می‌جویید. اندازه، وزن، line-height و رنگ هم هر کدام جای جداگانه‌ای دارند.
فونتلنز style محاسبه‌شده متن انتخابی شما را میخواند و همه‌چیز را در یک پنل می‌گذارد: پشته خانواده‌ها، نمونه‌ای از اولین خانواده، مقادیر، منبع فونت و CSS. چون CSS صفحه را میخواند، نمیتواند نام فونت داخل تصویر را پیدا کند.
چیزی از مرورگر شما خارج نمی‌شود
بدون حساب و سرور
فونتلنز در مرورگر شما اجرا می‌شود. بدون تحلیل داده و ردیابی.
فقط متن انتخابی را میخواند
پنل، سبک‌های متنی را میخواند که روی آن راستکلیک کرده‌اید. هیچ اطلاعاتی از صفحه جایی ارسال نمی‌شود.
چهار مجوز
منوی زمینه برای گزینه راستکلیک، زبانه فعال و دسترسی به صفحه برای باز شدن پنل، و فضای ذخیره‌سازی برای متن نمونه، واحد و قالب قطعه کد.
Chrome DevTools در برابر فونتلنز
| Chrome DevTools در برابر فونتلنز | Chrome DevTools | فونتلنز |
|---|---|---|
| رسیدن به فونت یک متن | بررسی صفحه، یافتن عنصر و باز کردن پنل Computed | انتخاب متن، راستکلیک و یک گزینه از منو |
| کپی به شکل Tailwind یا SCSS | خیر، مقادیر را یکی‌یکی کپی کنید | زبانه CSS، SCSS، SASS یا Tailwind |
| منبع فونت | جست‌وجوی فایل فونت در پنل Network | نشان Google Fonts، Adobe Fonts، میزبانی شخصی یا سیستم |
| دانلود فایل فونت | پیدا کردن در Network یا Sources و ذخیره آن | یک دکمه |
| بررسی کنتراست | در انتخاب‌گر رنگ پنل Styles | نشانهای AA و AAA کنار پیشنمایش زنده |
| قیمت | از پیش موجود | رایگان |
پرسش‌های متداول
چطور بفهمم یک سایت از چه فونتی استفاده میکند؟
فونتلنز را به Chrome اضافه کنید، متنی را در سایت انتخاب کنید، راستکلیک کنید و «Inspect font with FontLens» را بزنید. خانواده فونت، اندازه، وزن، line-height، رنگ و منبع آن را میبینید.
چطور CSS یک فونت را از سایت کپی کنم؟
در پنل، زبانه CSS، SCSS، SASS یا Tailwind را انتخاب و «Copy all» را بزنید، یا یک خط را جداگانه کپی کنید. اگر لازم است، ابتدا واحد را به px، rem، pt یا em تغییر دهید.
می‌توانم فونتی را از یک سایت دانلود کنم؟
اگر متن از فونت وب استفاده کند، «Download font» فایل را از منبع @font-face می‌گیرد. فونت سیستمی فایلی برای دانلود ندارد. پیش از استفاده در پروژه خود، مجوز فونت را بررسی کنید.
آیا فونتلنز فونت داخل تصویر یا PDF را تشخیص میدهد؟
خیر. این ابزار CSS متن واقعی صفحات وب را میخواند و نمیتواند فونتهای تصویر، canvas یا PDF را نامگذاری کند.
چطور کنتراست متن را برای WCAG بررسی کنم؟
پیشنمایش نسبت کنتراست رنگ متن و پسزمینه را با نشانهای AA و AAA برای متن معمولی و بزرگ نشان میدهد. هر رنگ را عوض کنید تا نشانها بهروز شوند.
می‌توانم اندازه‌ها را به‌جای px با rem ببینم؟
بله. واحد را روی px، rem، pt یا em بگذارید تا فیلدها و قطعه کد هم همان را نشان دهند. rem از اندازه فونت ریشه صفحه محاسبه می‌شود و انتخاب شما می‌ماند.
رایگان است؟ دادهای جمعآوری میکند؟
رایگان است و حساب کاربری نمیخواهد. سرور و تحلیل دادهای وجود ندارد؛ تنها درخواست، دانلود فونتی است که خودتان شروع میکنید.
در Edge، Brave یا Opera کار میکند؟
بیشتر مرورگرهای Chromium افزونههای Chrome Web Store را نصب میکنند؛ از جمله Edge، Brave، Opera و Vivaldi. Firefox و Safari پشتیبانی نمیشوند.
افزونههای رایگان بیشتر از PYROCTAL
تصویر کامل صفحهبا یک کلیک یا کلید میانبر از تمام صفحه وب اسکرینشات اسکرولی بگیرید و آن را به صورت یک فایل PNG ذخیره کنید.
انتخاب‌گر رنگ سادهابزار قطرهچکان و انتخاب رنگ با ذرهبین. با کلیک روی هر پیکسل، کد HEX, RGB یا HSL را کپی و از ۵۰ رنگ آخر استفاده کنید.
YouTube Auto Qualityکیفیت ویدیوی دلخواه را در یوتیوب بهصورت خودکار تنظیم کنید. پهنای باند ذخیره یا از HD/4K لذت ببرید.
ذخیره تصویر به صورت JPEGهر عکسی (WebP, PNG, AVIF و...) را با کلیکراست به فرمت JPG ذخیره کنید؛ فرمتی که تمام فرمهای آپلود میپذیرند.