أداة مجانية، دون تسجيل

ما الخط المستخدم في هذا الموقع؟

الصق رابطًا لمعرفة الخطوط التي يستخدمها موقع ويب، مع الأوزان والأحجام ومكان ظهور كل خط. مجانًا ودون تسجيل. اطّلع على أمثلة كاملة مثل خطوط Anthropic وخطوط Airbnb، أو تعرّف على ما يضيفه ملف DESIGN.md فوق ذلك.

جرّب

استخدم هذه الخطوط في شيفرتك

تعطيك الأداة أسماء العائلات وأوزانها ومكان استخدام كل منها في النص. لإعادة استخدامها، حمّل كل عائلة مرة واحدة، وخصّص لكل دور متغيّر CSS، واختم قائمة الخطوط دائمًا بخطوط احتياطية حتى يظهر النص أثناء تنزيل الخط أو إذا فشل تحميله.

1. حمّل الخط. لعائلة من Google Fonts، أضف وسم <link> الخاص بها أو استخدم next/font/google، واطلب الأوزان التي أدرجتها الأداة فقط. أما الخط التجاري، فاشترِ ترخيص ويب من الجهة المصمّمة له وقدّم ملفاته باستخدام @font-face.

2. سمِّ الأدوار. متغيّر واحد لكل وظيفة: display للعناوين، و body للنص الجاري، و mono للشيفرة البرمجية. ضع أسماء العائلات التي وجدتها مكان الأسماء الواردة هنا.

:root {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
body { font-family: var(--font-body); font-weight: 400; }
code, pre { font-family: var(--font-mono); }

3. استخدمها في Tailwind. تصبح القوائم نفسها أدوات مساعدة باسم font-display و font-sans و font-mono.

/* app.css, Tailwind CSS v4 */
@theme {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

العائلات نصف نظام الطباعة فقط. أما الأحجام وارتفاعات الأسطر والتباعد بين الأحرف لكل مستوى فتوجد في قسم الخطوط والطباعة (typography) في ملف DESIGN.md، الذي يستطيع وكيل البرمجة لديك تطبيقه على كل الشاشات.

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

أسئلة عن كاشف الخطوط

إجابات قصيرة عن الأداة المجانية: ⁨أداة كشف خطوط المواقع⁩.

يفتح الصفحة في متصفح حقيقي ويقرأ الخط المحسوب لكل جزء ظاهر من النص: العائلة التي عرضها المتصفح فعلًا، إضافةً إلى وزنها وحجمها. ثم تُجمّع العائلات وتُرتّب حسب كمية النص المكتوب بها.

لا. الخطوط برمجيات مرخّصة، وترخيص الموقع يشمل عادةً ذلك الموقع وحده. إذا كانت العائلة متوفرة على Google Fonts فيمكنك الحصول عليها هناك مجانًا؛ وإلا فابحث عن الجهة المصمّمة لها واشترِ ترخيصًا لاستخدامك الخاص.

تقرأ الأداة الصفحة الواحدة التي تُدخلها وتعرض ما يصل إلى ثماني عائلات. ولا ترى إلا النص الذي تعرضه تلك الصفحة لزائر جديد: النص المحمي بتسجيل الدخول، والصفحات التي تحظر المتصفحات الآلية، والحروف المرسومة كصور أو SVG لا تُقرأ، لذا لا تظهر خطوطها.

نعم. يُكتشف أي خط ويب تعرضه الصفحة، سواء أتى من Google Fonts أو Adobe Fonts أو من خوادم الموقع نفسه. تُعرض خطوط Google بشكلها الحقيقي في المعاينة؛ أما غيرها فيُعرض بخط احتياطي.

نعم، عنصرًا واحدًا في كل مرة. في Chrome أو Edge، انقر بزر الماوس الأيمن على النص، واختر Inspect (فحص)، ثم مرّر تبويب Computed وصولًا إلى Rendered Fonts، حيث يظهر اسم الخط المرسوم فعلًا. وفي Firefox، تعرض لوحة Fonts في Inspector خطوط العنصر المحدد وكل خط حمّلته الصفحة.

هذه الأداة تعرض الخطوط فقط. أما ملف DESIGN.md من Design Extractor فيغطي الألوان وسلّم الخطوط الكامل والمسافات وقواعد المكونات لموقع ما، في ملف واحد يستطيع وكيل البرمجة لديك اتّباعه.

المزيد من الأدوات المجانية

عرض كل الأدوات المجانية

هل تحتاج إلى نظام التصميم كاملًا؟

احصل على ملف DESIGN.md يضم الألوان وسلّم الخطوط والمسافات والمكونات لأي موقع، جاهزًا لوكيل البرمجة لديك.

احصل على ملف DESIGN.md