مستكشف اقترانات الخطوط

ابحث في 48 خطًّا من Google Fonts للعنوان والمتن، واضبط الوزن والحجم وارتفاع السطر والتباعد، واخلط الاقترانات، وانسخ كود CSS بصيغة @import أو link أو Fontsource.

جارٍ تحميل الأداة…

مستكشف اقترانات الخطوط — اختر خطًّا للعنوان وآخر للمتن من كتالوج قابل للبحث والتصفية حسب الفئة يضم 48 خطًّا شائعًا من Google Fonts، ثم اضبط بدقة لكل دور الوزن والحجم وارتفاع السطر والتباعد وشاهد النتيجة مباشرةً بنصّك الخاص. انقر على «اخلط» لاكتشاف تركيبات جديدة، وانسخ مقتطفًا جاهزًا للصق بصيغة قاعدة CSS ‏@import أو وسم HTML ‏link أو استيرادات npm الخاصة بـ Fontsource. لا يجلب متصفحك سوى الخطّين اللذين تختارهما مباشرةً من واجهة Google Fonts CSS API العامة؛ ولا يغادر نص العيّنة والإعدادات جهازك أبدًا.

ما هي مستكشف اقترانات الخطوط؟

مستكشف اقترانات الخطوط أداة مجانية تعمل داخل المتصفح موجَّهة لمصممي الويب والمطوّرين وصنّاع المحتوى الذين يريدون تركيبة أنيقة من العنوان والمتن دون التنقيب في مكتبات الخطوط. يتيح لك محدِّدان مستقلّان قابلان للبحث تصفية 48 خطًّا منتقى من Google Fonts حسب serif أو sans أو display أو mono واختيار خطٍّ لكل دور، بينما تضبط عناصر التحكّم لكل دور الوزن والحجم وارتفاع السطر والتباعد. تعرض المعاينة المباشرة عنوانك وفقرتك بالخطوط الفعلية، ويقترح زر الخلط اقترانات عشوائية عندما تحتاج إلى إلهام. وعندما يعجبك، انسخ كود CSS المُولَّد بالصيغة التي تفضّلها — قاعدة @import أو وسم HTML ‏link أو استيرادات بأسلوب Fontsource — وضعه في صفحة هبوط أو سمة مدوّنة أو عرض شرائح أو نظام تصميم.

كيفية استخدام مستكشف اقترانات الخطوط

  1. في محدِّد العنوان، صفِّ حسب serif أو sans أو display أو mono، واكتب للبحث، وانقر على خطٍّ لتحديده.
  2. افعل الشيء نفسه في محدِّد المتن لاختيار خطٍّ مكمِّل لنص الفقرة.
  3. افتح الإعدادات لتحديد الوزن والحجم وارتفاع السطر والتباعد لكل دور.
  4. اكتب عنوانك وجملتك الخاصة في حقل العيّنة، أو اتركه فارغًا لاستخدام النص الافتراضي؛ واضغط «اخلط» للحصول على أفكار اقتران عشوائية.
  5. اختر صيغة الإخراج — @import أو <link> أو Fontsource — وانسخ كود CSS المُولَّد إلى ورقة الأنماط أو مشروعك.

أمثلة

عنوان تحريري بمتن سهل القراءة

المدخل

العنوان: Playfair Display 700 · المتن: Source Sans 3 400

المخرج

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');

وسم link لصفحات HTML البسيطة

المدخل

الصيغة: <link>

المخرج

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Lora:wght@600&display=swap" rel="stylesheet">

استيرادات Fontsource لأداة تجميع

بدِّل الصيغة إلى Fontsource فيصبح المقتطف سطر تثبيت npm إضافةً إلى استيرادات حسب الوزن مثل import '@fontsource/inter/700.css'; — جاهز لمشروع React أو Vite أو Next.js.

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

كيف أختار الخطّين؟
لكل دور محدِّده الخاص. صفِّ الكتالوج حسب serif أو sans أو display أو mono، واكتب جزءًا من اسم العائلة للبحث، وانقر على نتيجة لتحديدها. يُختار العنوان والمتن بشكل مستقل، ويختار زر «اخلط» زوجًا عشوائيًا نيابةً عنك.
هل يمكنني التحكّم في الوزن والحجم وارتفاع السطر والتباعد؟
نعم. افتح الإعدادات لتحديد الوزن والحجم بالبكسل وارتفاع السطر والتباعد (بوحدة em) بشكل منفصل للعنوان والمتن. يظهر كل تغيير في المعاينة المباشرة وفي كود CSS المنسوخ معًا.
ما صيغ الإخراج التي يمكنني نسخها؟
ثلاث: قاعدة CSS ‏@import، ووسم HTML ‏<link> مع تلميحات preconnect، واستيرادات npm بأسلوب Fontsource ‏(npm i @fontsource/… مع أسطر استيراد حسب الوزن). وتتضمّن الثلاث القواعد نفسها لـ font-family والوزن والحجم وارتفاع السطر والتباعد لعناصر h1–h3 و body.
من أين تأتي الخطوط، وهل نصّي خاص؟
عند اختيارك اقترانًا، يحمِّل متصفحك هاتين العائلتين فقط مباشرةً من واجهة Google Fonts CSS API العامة على fonts.googleapis.com — وهو طلب إلى طرف ثالث يُرسَل من متصفحك مباشرةً، لا عبر خوادمنا. ويبقى نص العيّنة والإعدادات بالكامل على جهازك.
ما الخطوط المضمَّنة؟
مجموعة منتقاة من 48 خطًّا شائعًا من Google Fonts تشمل serif و sans-serif و display و monospace — ومنها Playfair Display و Merriweather و Inter و Roboto و Poppins و Montserrat و Oswald و Space Grotesk و JetBrains Mono وغيرها.

أدوات ذات صلة

تحويل الكود إلى صورة

حوّل مقتطف كود إلى صورة بإبراز لتركيب الجملة داخل متصفحك، مع أكثر من 20 لغة وسمات وخلفيات مخصّصة وأرقام أسطر وتصدير PNG أو SVG.

أداة فحص تباين الألوان

افحص تباين WCAG 2.1 ودرجة APCA Lc بين لون النص ولون الخلفية، وشاهد شارات AA وAAA و3:1، وطبّق أقرب لون ناجح.

خالط الألوان

امزج لونين بصيغة HEX بنسبة تختارها في فضاء RGB أو Lab، واقرأ اللون الوسطي الناتج كعينة وقيمة HEX قابلة للنسخ.

مولّد درجات الألوان

حوّل لونًا أساسيًا واحدًا بصيغة HEX إلى مقياس OKLCH أو HSL أو RGB بخطوات قابلة للتعديل، وتلميحات تباين WCAG لكل خطوة، وتصدير إلى CSS وTailwind وJSON.