Baloo Bhaijaan 2
Baloo Bhaijaan 2
إعدادات الخط
معاينة الخط
الحمد لله رب العالمين
نصوص تجريبية
الحمد لله رب العالمين
أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ
طباعة النص العربي
مرحبا بكم في عالم الخطوط العربية
هذا نص تجريبي لعرض الخط
النص العربي الجميل
تطوير وتصميم المواقع
الخط العربي فن وإبداع
التصميم الجرافيكي الحديث
خطوط عربية مميزة وجميلة
أشكال الخط المتاحة
الحمد لله رب العالمين
عادي
font-family: 'Baloo Bhaijaan 2', 'Noto Sans Arabic', Arial, sans-serif;
font-weight: 400;
font-style: normal;الحمد لله رب العالمين
متوسط
font-family: 'Baloo Bhaijaan 2', 'Noto Sans Arabic', Arial, sans-serif;
font-weight: 500;
font-style: normal;الحمد لله رب العالمين
شبه عريض
font-family: 'Baloo Bhaijaan 2', 'Noto Sans Arabic', Arial, sans-serif;
font-weight: 600;
font-style: normal;الحمد لله رب العالمين
عريض
font-family: 'Baloo Bhaijaan 2', 'Noto Sans Arabic', Arial, sans-serif;
font-weight: 700;
font-style: normal;الحمد لله رب العالمين
عريض جداً
font-family: 'Baloo Bhaijaan 2', 'Noto Sans Arabic', Arial, sans-serif;
font-weight: 800;
font-style: normal;عينات الخط
أحجام مختلفة
مرحباً بكم في عالم الخطوط العربية الجميلة
مرحباً بكم في عالم الخطوط العربية الجميلة
مرحباً بكم في عالم الخطوط العربية الجميلة
مرحباً بكم في عالم الخطوط العربية الجميلة
مرحباً بكم في عالم الخطوط العربية الجميلة
مرحباً بكم في عالم الخطوط العربية الجميلة
مرحباً بكم في عالم الخطوط العربية الجميلة
مرحباً بكم في عالم الخطوط العربية الجميلة
أنواع النصوص
العناوين
الذكاء الاصطناعي يغير العالم
النص الأساسي
تشهد التكنولوجيا الحديثة تطوراً سريعاً في مجال الذكاء الاصطناعي، حيث تساهم هذه التقنيات في تحسين حياتنا اليومية وتوفير حلول مبتكرة للتحديات المعاصرة. من المتوقع أن تستمر هذه الثورة التقنية في تشكيل مستقبل البشرية نحو الأفضل.
النص الصغير
هذا نص توضيحي صغير يُستخدم عادة في التفاصيل والملاحظات والتوضيحات الإضافية في التصميم.
الأرقام والتواريخ
٢٠٢٤/١٢/١٥ • ١٢:٣٠ ص • 2024/12/15 • 12:30 PM
مجموعة الحروف
الحروف العربية
أ ب ت ث ج ح خ د ذ ر ز س ش ص ض ط ظ ع غ ف ق ك ل م ن ه و ي
الحروف المتصلة
قُلْ هُوَ ٱللَّهُ أَحَدٌ ١ ٱللَّهُ ٱلصَّمَدُ ٢ لَمْ يَلِدْ وَلَمْ يُولَدْ ٣ وَلَمْ يَكُن لَّهُۥ كُفُوًا أَحَدٌۢ ٤
الأرقام
١٢٣٤٥٦٧٨٩٠ • 1234567890
علامات الترقيم
، . ؛ : ؟ ! " " ' ' ( ) [ ] - – — • …
كود CSS
CSS للخط - يمكن نسخه واستخدامه مباشرة
/* استيراد الخط من Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap');
/* استخدام الخط */
.arabic-text {
font-family: ''Baloo Bhaijaan 2', display', 'Noto Sans Arabic', Arial, sans-serif;
font-size: 40px;
font-weight: 400;
font-style: normal;
letter-spacing: 0px;
color: #000000;
line-height: 1.5;
direction: rtl;
text-align: right;
}خيارات التحميل
رابط Google Fonts
استخدم هذا الرابط في HTML
HTML Link
<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap" rel="stylesheet">رابط CSS Import
استخدم هذا في CSS
CSS Import
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap');أمثلة متقدمة للاستخدام
تعلم كيفية استخدام خط Baloo Bhaijaan 2 بطرق متقدمة مع أمثلة كاملة للـ HTML وCSS وJavaScript
مثال كامل لصفحة HTML تستخدم خط Baloo Bhaijaan 2
مثال HTML كامل - جاهز للاستخدام
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال على استخدام خط Baloo Bhaijaan 2</title>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap" rel="stylesheet">
<style>
.arabic-text {
font-family: 'Baloo Bhaijaan 2', 'Noto Sans Arabic', Arial, sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1.6;
color: #333;
}
.title {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 1rem;
}
.paragraph {
font-size: 1.2rem;
margin-bottom: 1rem;
}
</style>
</head>
<body>
<div class="container">
<h1 class="arabic-text title">عنوان بخط Baloo Bhaijaan 2</h1>
<p class="arabic-text paragraph">
هذا مثال على استخدام خط Baloo Bhaijaan 2 في صفحة ويب عربية.
يمكنك استخدام هذا الخط لتحسين مظهر النصوص العربية في موقعك.
</p>
<p class="arabic-text paragraph">
الخط يدعم جميع الحروف العربية والأرقام العربية والهندية،
ويوفر تجربة قراءة مريحة وجميلة للمستخدمين.
</p>
</div>
</body>
</html>
أنماط CSS شاملة مع متغيرات وتصميم متجاوب
أنماط CSS متقدمة - مع متغيرات وتصميم متجاوب
/* استيراد الخط من Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap');
/* تعريف متغيرات CSS للخط */
:root {
--font-primary: 'Baloo Bhaijaan 2', 'Noto Sans Arabic', Arial, sans-serif;
--font-weight: 400;
--font-style: normal;
}
/* الأنماط الأساسية للنصوص العربية */
.arabic-text {
font-family: var(--font-primary);
font-weight: var(--font-weight);
font-style: var(--font-style);
direction: rtl;
text-align: right;
line-height: 1.6;
color: #333;
}
/* أنماط العناوين */
.heading-large {
font-size: 3rem;
font-weight: bold;
margin-bottom: 1.5rem;
color: #1a202c;
}
.heading-medium {
font-size: 2rem;
font-weight: 600;
margin-bottom: 1rem;
color: #2d3748;
}
.heading-small {
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 0.75rem;
color: #4a5568;
}
/* أنماط النصوص */
.text-large {
font-size: 1.25rem;
line-height: 1.8;
}
.text-normal {
font-size: 1rem;
line-height: 1.6;
}
.text-small {
font-size: 0.875rem;
line-height: 1.5;
color: #718096;
}
/* أنماط خاصة */
.text-highlighted {
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
/* تصميم متجاوب */
@media (max-width: 768px) {
.heading-large { font-size: 2rem; }
.heading-medium { font-size: 1.5rem; }
.text-large { font-size: 1.125rem; }
}
كود JavaScript لتحميل الخط ديناميكياً وتحسين الأداء
مدير الخط بـ JavaScript - تحميل ديناميكي وتحسين الأداء
// JavaScript لتحسين تجربة الخط
class ArabicFontManager {
constructor(fontName, fontUrl) {
this.fontName = fontName;
this.fontUrl = fontUrl;
this.init();
}
// تحميل الخط ديناميكياً
async loadFont() {
try {
// إنشاء عنصر link للخط
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = this.fontUrl;
document.head.appendChild(link);
// انتظار تحميل الخط
await this.waitForFontLoad();
console.log(`تم تحميل خط ${this.fontName} بنجاح`);
return true;
} catch (error) {
console.error('خطأ في تحميل الخط:', error);
return false;
}
}
// انتظار تحميل الخط
waitForFontLoad() {
return new Promise((resolve) => {
if (document.fonts && document.fonts.ready) {
document.fonts.ready.then(resolve);
} else {
// fallback للمتصفحات القديمة
setTimeout(resolve, 1000);
}
});
}
// تطبيق الخط على العناصر
applyToElements(selector = '.arabic-text') {
const elements = document.querySelectorAll(selector);
elements.forEach(element => {
element.style.fontFamily = `'${this.fontName}', 'Noto Sans Arabic', Arial, sans-serif`;
});
}
// تحسين الأداء باستخدام font-display
optimizePerformance() {
const style = document.createElement('style');
style.textContent = `
@font-face {
font-family: '${this.fontName}';
src: url('${this.fontUrl}');
font-display: swap;
}
`;
document.head.appendChild(style);
}
// تهيئة مدير الخط
async init() {
this.optimizePerformance();
await this.loadFont();
this.applyToElements();
}
}
// استخدام مدير الخط
const fontManager = new ArabicFontManager('Baloo Bhaijaan 2', 'https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap');
// تطبيق تحسينات إضافية عند تحميل الصفحة
document.addEventListener('DOMContentLoaded', () => {
// تحسين القراءة للنصوص الطويلة
const longTexts = document.querySelectorAll('.long-text');
longTexts.forEach(text => {
text.style.lineHeight = '1.8';
text.style.letterSpacing = '0.5px';
});
// إضافة تأثيرات بصرية للعناوين
const headings = document.querySelectorAll('h1, h2, h3');
headings.forEach(heading => {
heading.style.textShadow = '1px 1px 2px rgba(0,0,0,0.1)';
});
});