Developer Tools
Text Toolsأداة معاينة الخطوط
معاينة أي خط من Google Fonts بنص مخصص وحجم ووزن ولون. توليد كود CSS للاستيراد فورًا. أداة مجانية لمعاينة الخطوط.
الخطوط الشائعة
Style
Browser Support
Style Tags
216 fonts
معاينة مباشرة
The quick brown fox jumps over the lazy dog
معاينة الخط
اسم الخط:Roboto
حجم الخط:32px
وزن الخط:400
كود CSS
CSS font-family:
font-family: 'Roboto', sans-serif;عنوان URL استيراد Google Fonts:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');Full CSS snippet
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 32px;
color: #1e293b;
}الأدوات ذات الصلة
حول أداة معاينة الخطوط
كيف تعمل
- أدخل أي اسم عائلة من Google Fonts أو اختر من القائمة الشائعة
- يتم تحميل الخط ديناميكيًا عبر Google Fonts API في متصفحك
- اضبط الوزن والحجم واللون والخلفية لرؤية إعدادك المثالي
- انسخ تعريف CSS font-family أو URL الاستيراد لاستخدامه في مشروعك
- تبديل بين نصوص عينة محددة مسبقًا أو إدخال نص مخصص
حالات الاستخدام الشائعة
- اختيار الخط المناسب لمشروع ويب جديد
- مقارنة مظهر أوزان مختلفة لنفس الخط بأحجام متنوعة
- توليد مقتطف CSS الصحيح لاستيراد خط Google
- عرض خيارات الخطوط للعملاء دون مغادرة المتصفح
- التحقق من عرض الأرقام والرموز لواجهات البيانات
الأسئلة الشائعة
ما هي أداة معاينة الخطوط؟
تتيح لك أداة معاينة الخطوط تحميل أي عائلة خطوط من Google Fonts وضبط وزنها وحجمها ولونها وخلفيتها ومعاينتها بنص مخصص ونسخ كود CSS للاستيراد، كل ذلك مباشرة في متصفحك.
كيف أعاين خط Google؟
اكتب اسم خط Google (مثل 'Playfair Display') في مربع البحث وانقر على 'تحميل الخط'، أو انقر على أي اسم من قائمة الخطوط الشائعة.
هل يمكنني استخدام أي خط Google؟
نعم. يمكنك كتابة الاسم الدقيق لأي خط متاح في Google Fonts. تقوم الأداة تلقائيًا ببناء عنوان URL الصحيح وتحميل جميع الأوزان المتاحة (100–900).
ما أوزان الخطوط المدعومة؟
تطلب الأداة الأوزان من 100 إلى 900 من Google Fonts. إذا لم يتضمن الخط وزنًا معينًا، فسيعرض المتصفح أقرب وزن متاح.
كيف أنسخ كود CSS لمشروعي؟
بعد تحميل الخط، انتقل إلى قسم كود CSS في اللوحة اليمنى. استخدم أزرار النسخ بجانب كل مقتطف لنسخ تعريف font-family أو عنوان URL للاستيراد أو كتلة CSS الكاملة.
ما النصوص النموذجية المتاحة؟
يتوفر ستة إعدادات مسبقة: جملة البانغرام، الأبجدية، الأرقام والرموز، Lorem Ipsum، مثال عنوان، ومثال فقرة. يمكنك أيضًا كتابة نصك المخصص.
هل تخزن هذه الأداة أي بيانات؟
لا. أداة معاينة الخطوط تعمل بالكامل في المتصفح. تحمل الخطوط عبر Google Fonts API العامة ولا تخزن أي شيء على أي خادم.
هل يمكنني تغيير لون النص والخلفية؟
نعم. استخدم منتقيات الألوان في قسم الألوان لاختيار أي لون HEX للنص وخلفية المعاينة. هذا مفيد للتحقق من نسب التباين.
لماذا يفشل تحميل الخط؟
قد يفشل التحميل إذا كان اسم الخط مكتوبًا بشكل خاطئ، أو إذا تمت إزالة الخط من Google Fonts، أو إذا كانت شبكتك تحجب الطلبات إلى fonts.googleapis.com.
هل الأداة مجانية؟
نعم، أداة معاينة الخطوط مجانية تمامًا. يتم تقديم الخطوط من CDN Google Fonts بموجب تراخيص مفتوحة المصدر.
هل يمكنني مقارنة خطوط متعددة جنبًا إلى جنب؟
يمكنك التبديل السريع بين الخطوط باستخدام شرائح الخطوط الشائعة. للمقارنة الرسمية، افتح الأداة في علامتي تبويب متصفح مختلفتين.
ما هو تعريف CSS لـ font-family؟
يخبر تعريف CSS لـ font-family المتصفح بالخط الذي يجب استخدامه، مع خطوط بديلة. مثال: font-family: 'Roboto', sans-serif;