معاينة خطوط جوجل معاينة خطوط جوجل مع نص قابل للتعديل، وحجم، ووزن، ومسافة بين الحروف.
معاينة خطوط جوجل
معاينة خطوط جوجل مع نص قابل للتعديل، وحجم، ووزن، ومسافة بين الحروف.
تصفح أو ابحث عن خطوط
ابحث من خلال 30 خطًا مشهورًا من Google Fonts أو تصفح القائمة الكاملة.
تخصيص المعاينة
حدد النص العينة، وحجم الخط، والوزن، ومسافة الحروف، وارتفاع السطر.
نسخ CSS
معاينة الخط بأوزان مختلفة ونسخ رمز @import وCSS.
What Is معاينة خطوط جوجل?
أداة معاينة Google Fonts تسمح لك بالاستكشاف ومعاينة الخطوط الشهيرة من Google Fonts مع التحكم الكامل في الطباعة. توفر Google Fonts مئات الخطوط المجانية والمفتوحة المصدر المُختبرة للويب. تتضمن هذه الأداة 30 من أكثر الاختيارات شعبية، قابلة للبحث بالاسم.对于 كل خط، يمكنك معاينته بنص عينة مخصص وضبط حجم الخط ووزن الخط (100-900) ومسافة الحروف وارتفاع السطر. تعرض المعاينة متعددة الأوزان الخط بمختلف الأوزان جنبًا إلى جنب، مما يساعدك في تقييم مرنته. يتضمن CSS المُحصل عليه عنوان URL لاستيراد Google Fonts وإعلان عائلة الخط مع خصائص الحجم والوزن والمسافة وارتفاع السطر. هذه الأداة ضرورية لتقييم الخطوط قبل الالتزام بها بمشروع.
Why Use معاينة خطوط جوجل?
-
30 خطًا مشهورًا من Google Fonts مع تصفية البحث
-
تحكم كامل في الطباعة: حجم، وزن، مسافة، ارتفاع سطر
-
معاينة متعددة الأوزان تظهر مرونة الخط في لمحة
-
إخراج CSS كاملة مع @import URL والإعلانات
Common Use Cases
اختيار الخط
تقييم ومقارنة الخطوط قبل اختيارها لمشروع ويب.
اختبار الطباعة
اختبار الخطوط بأحجام وأوزان محددة لتصاميم النماذج.
استكشاف خط العلامة التجارية
استكشاف خيارات الخط للهوية التجارية والمواد التسويقية.
مرجع المطور
معاينة سريعة ونسخ رمز CSS للخطوط أثناء التطوير.
Technical Guide
يقدم Google Fonts ملفات الخطوط من خلال شبكة توصيل المحتوى مع تحديد التنسيق التلقائي (woff2 للمتصفحات الحديثة). يضيف أسلوب الاستيراد الخطوط عبر CSS: @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); يحدد 매개 변수 العائلة الخط والأوزان. يستخدم معامل display=swap خاصية font-display: swap للرؤية الفورية للنص مع خط بديل أثناء تحميل خط الويب. يتم فصل الخطوط المتعددة بواسطة معلمات &family=. من أجل الأداء، اطلب فقط الأوزان التي تحتاجها. توفر الخطوط القابلة للتغيير (متاحة ل许多 خطوط Google) جميع الأوزان في ملف واحد باستخدام بناء الجملة wght@100..900. يمكن أن يقلل جزء الخط الإضافي من حجم الملف عن طريق تحميل نطاقات الأحرف الضرورية فقط: معلمات &text=Hello أو subset=latin. استخدم خاصية عائلة الخط مع خطوط بديلة: font-family: 'Inter', system-ui, sans-serif.
Tips & Best Practices
-
1اطلب فقط الأوزان التي تستخدمها فعلاً للحصول على أداء أفضل
-
2استخدم font-display: swap لمنع النص غير المرئي خلال التحميل
-
3اختبر الخطوط مع المحتوى الفعلي الخاص بك، وليس فقط Lorem Ipsum
-
4فكر في خطوط متغيرة للحصول على مرونة وزن قصوى في ملف واحد
Related Tools
نص CSS التدرجي
انشئ نصًا مع ملء تدرجي باستخدام CSS background-clip و text-fill-color.
🎨 CSS & Design
مُولِد تَشْكِيلات Tailwind
أَنشئ ملفات تَشْكِيل Tailwind CSS مَع ألوان مخصصة وخطوط وأحجام شاشة.
🎨 CSS & Design
مُولِد مقياس الطباعة
إنشاء مقياس طباعي متجدد مع حجم أساسي قابل للتعديل ونسبة ووحدات.
🎨 CSS & Design
مشاهدة إعادة تعيين CSS
عرض ومقارنة أوراق الأنماط الشائعة لإعادة تعيين وتنسيق CSS.
🎨 CSS & DesignFrequently Asked Questions
Q هل خطوط Google مجانية؟
Q كيف أضيف خطوط Google إلى مشروعي؟
Q هل تؤثر خطوط Google على سرعة الصفحة؟
Q ما هو font-display: swap؟
Q هل يمكنني استضافة خطوط Google بنفسي؟
About This Tool
معاينة خطوط جوجل is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.