يقوم مُسجِّل الخطوط بمسح أي صفحة ويب ويقدم جرداً كاملاً لكل عائلة خطوط مستخدمة — الخطوط المحملة من شبكات CDN، الخطوط المستضافة ذاتياً، والخطوط الاحتياطية لنظام التشغيل. يعرض كل خط معاينة نصية حية، الأوزان والأنماط المحملة، عدد العناصر التي تستخدمه، ونسخ بضغطة زر لإعلان الـ CSS الخاص به.
إن معرفة الخطوط المستخدمة في موقع يثير إعجابك كان يتطلب سابقاً فحص العناصر واحداً تلو الآخر في أدوات المطور (DevTools)، أو التحقق من خاصية font-family، أو استخدام إضافات المتصفح التي تكتشف خطاً واحداً فقط في كل مرة. تمنحك هذه الأداة تفصيلاً شاملاً في واجهة واحدة — حيث تعرض كل خط تم تحميله واستخدامه في الصفحة، مع نماذج نصية حية تظهر بالضبط كيف يتم عرض كل خط. تُفرق الأداة بين خطوط الويب الوافدة (عبر @font-face أو Google Fonts) وخطوط النظام الأساسية (مثل Arial، Helvetica، Georgia، إلخ)، مما يوضح تركيبة عائلة الخط بالكامل. لكل خط، سترى الأوزان المحملة (400، 600، 700)، والعناصر التي تستخدمه، وأحجام الخطوط المطبقة. انقر فوق أي خط لنسخ إعلان الـ CSS الخاص به — ليكون جاهزاً للصق في مشروعك. المعاينة المباشرة تستخدم العرض الفعلي للخط من الصفحة، وليس عرضاً افتراضياً عاماً، لذلك ترى بالضبط كيف يبدو الخط بالحجم والوزن المستخدم في الموقع.
يسرد كل عائلة خطوط معروضة فعلياً على الصفحة، بما في ذلك الخطوط المستوردة من Google Fonts، أو Adobe Fonts، أو تصريحات @font-face المخصصة، والخطوط الاحتياطية للنظام. يعرض إجمالي عدد عائلات الخطوط الفريدة المكتشفة.
يُعرض كل خط مع نموذج نصي مباشر لجملة ("The quick brown fox jumps over the lazy dog") يتم إظهارها باستخدام ملف الخط الفعلي المُحمل على الصفحة. ترى عرضاً حقيقياً — وليس مجرد معاينة مطلقة.
لكل خط، ترى الأوزان المحملة (عادي 400، متوسط 500، شبه عريض 600، وعريض 700) وما إذا كان هناك متغيرات للخط المائل. يساعدك هذا في فهم جزء ومجموعة الخط المحملة.
شاهد عدد العناصر التي تستخدم كل خط في الصفحة. يُدرج الخط الأكثر استخداماً في المقام الأول. اعرف أي الخطوط هي الأساسية (للنصوص) وأيها ثانوية (مستخدمة لعدد قليل من العناصر فقط).
انقر فوق أي خط بنتيجته لنسخ إعلانه الكامل من الـ CSS لخاصية (font-family: 'Inter', sans-serif مثلا) إلى الحافظة. ليكون جاهزاً لللصق مباشرة في ملف التنسيق الخاص بك.
يُعرض لكل خط مصدره الأصلي: مكتبة Google Fonts (مع الرابط الخاص)، أو Adobe Fonts، أو استضافة محلية (مع رابط تعريفي بـ @font-face)، أو عائلة خطوط النظام. درّ بحذافيره من أين صدر كل خط.
قم بزيارة موقع بطباعة مبهرة واعرض فوراً كل الخطوط التي يعمد إليها — أسماءه وأوزانه ومصادره. لا مزيد من هدر الوقت بتخمين "ما هو هذا الخط؟" أو استخدام أدوات تخمين غبر موثوقة.
كم من الخطوط تحملها صفحتك؟ هل هناك خطوط يتم تنزيلها ولا تستخدمها؟ تسرد الأداة كل الخطوط الفعالة — فإذا كان هناك خط يُستخدم في 0 من العناصر، ذلك هدر في بيانات النطاق عبثاً.
وثّق تصميمات الطباعة (Typography) لمشروعك بتفعيل الأداة على كل صفحة. لتتثبت من مطابقة الخطوط والأوزان بعينها في أرجاء موقعك وتصطاد أي إعلان شاذ لـ font-family لم يتم حذفه.
شخّصت خطاً أعجبك ولكنه مدفوع؟ انسخ اسمه وابحث عن بدائل مجانية تملك ذات الانحناءت الفنية. المعاينة المباشرة الحية تفيدك بحفظ صورة لملامح هذا الخط بمخيلتك.
شغل مستكشف الخطوط على الصفحة بمتصفحات عدة لكي تتحقق من تناسق ورسمة الخط. فتركيبة الخط الأساسية (System Font) تظهر بشكل مغاير بين أنظمة التشغيل — اكتشف هذه التباينات لتتدخل مبكراً.
افتح قائمة DevSuite Pro العائمة وانقر على أيقونة أداة List All Fonts. تفحص الأداة الأنماط المحسوبة وأنظمة استيراد @font-face في عمق الصفحة.
تعرض لك لوحة جميع الخطوط الموجودة مرتبة حسب معدل ومدى استخدامها وكثافتها. تُظهر كل إدخالة للخط معاينة بنص صغير والأوزان وتعداد تفرعها.
مرر خلال شريط المعاينات الحية لتشاهد كيف جرى تقديم هذا الخط. وقم بمقارنة خط العناوين للصفحة وخط سرد الكلام والتمييز.
اضغط على أي خط للاحتفاظ بكود font-family CSS به في الحافظة. اضغط رابط المصدر لزيارة النطاق الأصلي (رابط Google Fonts ومرفق CDN وما إلى ذلك).
قم بلصق تصريح font-family كخاصية في ملف CSS وحمل الخط من ذات المصدر ليعمل بدون مشاكل في مشروعك.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.
