ما هو أداة اختبار الخطوط؟

مختبر الطباعة يُتيح لك تعديل خصائص الخط ورؤية النتائج فورًا. اختر عائلة الخط واضبط الحجم والوزن وارتفاع السطر والتباعد، ثم انسخ CSS مباشرةً إلى مشروعك.

تتيح الأداة ضبط عائلة الخط، الحجم، الوزن (من ١٠٠ إلى ٩٠٠)، ارتفاع السطر، تباعد الحروف، تباعد الكلمات، المحاذاة، تحويل الحالة، واللون. النص التجريبي قابل للتحرير فتعاين عناوينك وفقراتك الفعلية، ولوحة الـ CSS بنقرة واحدة جاهزة للصق في ملف أنماط أو مكوّن مُنسَّق.

كيفية الاستخدام

1. اكتب نصك النموذجي أو الصقه في منطقة المعاينة.
2. اضبط عناصر التحكم الطباعية: عائلة الخط والحجم والوزن وارتفاع السطر والمسافة بين الحروف والمسافة بين الكلمات.
3. انسخ كود CSS الناتج لاستخدام إعدادات الطباعة مباشرةً في مشروعك.

متى تستخدم

• ضبط نص مقالات المدونة حتى يصبح Inter بحجم ١٨ بكسل وارتفاع سطر ١٫٦ مريحاً على الهاتف.
• تجربة مقال طويل بأحجام ١٦ و١٧ و١٨ لمعرفة أيّها يُبقي القارئ مستمراً.
• اختبار رفع تباعد الحروف لإصلاح الزحام في أزرار مكتوبة بالأحرف الكبيرة.

النتيجة

يختبر مصمم ويب خط 'Inter' بحجم 18 بكسل وارتفاع سطر 1.6 ومسافة بين الحروف 0.02em، ثم ينسخ كود CSS لصفحة أنماط مدونته.

الأسئلة الشائعة

ما أنسب ارتفاع سطر لنص الموضوع؟

في الفقرات الطويلة بحجم ١٦-١٨ بكسل، يكون ارتفاع السطر بين ١٫٥ و١٫٧ مريحاً على الشاشة. العناوين تظهر أفضل بقيم أضيق، عادة ١٫١ إلى ١٫٣. اكتب عنواناً وفقرة في خانة العينة لتقارن جنباً إلى جنب.

لماذا يستخدم تباعد الحروف وحدة em بدل px؟

وحدة em تكبر وتصغر مع حجم الخط، لذا قيمة ٠٫٠٢ em تبدو بنفس النسبة سواء كان النص ١٤ بكسل أو ٤٨ بكسل. أما القيمة بالبكسل فقد تناسب حجماً واحداً وتصبح غير متناسبة في الأحجام الأخرى.

ما أوزان الخط الآمنة الاستخدام على الويب؟

خطوط Google الحديثة والخطوط المتغيرة تدعم من ١٠٠ إلى ٩٠٠، لكن بعض الخطوط المستضافة ذاتياً تأتي فقط بالوزن ٤٠٠ و٧٠٠. إذا لم تتغيّر المعاينة عند تبديل الوزن فالخط لا يوفّر ذلك الوزن، فيركّب المتصفح نسخة مزيّفة منه.

هل أستطيع اختبار خطوط لم تحمّلها الصفحة مسبقاً؟

اختر من قائمة الخطوط المدمجة، فيها مربع بحث وفلاتر بلا أذرع / بأذرع / متساوية العرض / النظام، وأي خط من Google يُحمّل تلقائياً عند اختياره. انتقل إلى عرض «المعرض» لترى نصك التجريبي بكل الخطوط دفعة واحدة، أو فعّل «المقارنة» لتضع خطين جنباً إلى جنب. رفع ملف خط مخصص غير مدعوم هنا، ولذلك يلزم @font-face داخل موقعك.

كيف أنقل الـ CSS إلى مشروع React أو Tailwind؟

اضغط نسخ CSS لتأخذ كل خاصية كإعلان قياسي. في React، الصق داخل قالب styled-components أو حوّل كل سطر إلى مفتاح camelCase. في Tailwind، اربط الحجم والوزن بفئات utility، واحتفظ بالتباعد المخصص باستخدام صيغة القيم الاعتباطية.

أدوات ذات صلة