Readex Pro
Readex Pro
إعدادات الخط
معاينة الخط
الحمد لله رب العالمين
نصوص تجريبية
الحمد لله رب العالمين
أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ
طباعة النص العربي
مرحبا بكم في عالم الخطوط العربية
هذا نص تجريبي لعرض الخط
النص العربي الجميل
تطوير وتصميم المواقع
الخط العربي فن وإبداع
التصميم الجرافيكي الحديث
خطوط عربية مميزة وجميلة
أشكال الخط المتاحة
الحمد لله رب العالمين
خفيف جداً
font-family: 'Readex Pro', 'Noto Sans Arabic', Arial, sans-serif;
font-weight: 200;
font-style: normal;الحمد لله رب العالمين
خفيف
font-family: 'Readex Pro', 'Noto Sans Arabic', Arial, sans-serif;
font-weight: 300;
font-style: normal;الحمد لله رب العالمين
عادي
font-family: 'Readex Pro', 'Noto Sans Arabic', Arial, sans-serif;
font-weight: 400;
font-style: normal;الحمد لله رب العالمين
متوسط
font-family: 'Readex Pro', 'Noto Sans Arabic', Arial, sans-serif;
font-weight: 500;
font-style: normal;الحمد لله رب العالمين
شبه عريض
font-family: 'Readex Pro', 'Noto Sans Arabic', Arial, sans-serif;
font-weight: 600;
font-style: normal;الحمد لله رب العالمين
عريض
font-family: 'Readex Pro', 'Noto Sans Arabic', Arial, sans-serif;
font-weight: 700;
font-style: normal;عينات الخط
أحجام مختلفة
مرحباً بكم في عالم الخطوط العربية الجميلة
مرحباً بكم في عالم الخطوط العربية الجميلة
مرحباً بكم في عالم الخطوط العربية الجميلة
مرحباً بكم في عالم الخطوط العربية الجميلة
مرحباً بكم في عالم الخطوط العربية الجميلة
مرحباً بكم في عالم الخطوط العربية الجميلة
مرحباً بكم في عالم الخطوط العربية الجميلة
مرحباً بكم في عالم الخطوط العربية الجميلة
أنواع النصوص
العناوين
الذكاء الاصطناعي يغير العالم
النص الأساسي
تشهد التكنولوجيا الحديثة تطوراً سريعاً في مجال الذكاء الاصطناعي، حيث تساهم هذه التقنيات في تحسين حياتنا اليومية وتوفير حلول مبتكرة للتحديات المعاصرة. من المتوقع أن تستمر هذه الثورة التقنية في تشكيل مستقبل البشرية نحو الأفضل.
النص الصغير
هذا نص توضيحي صغير يُستخدم عادة في التفاصيل والملاحظات والتوضيحات الإضافية في التصميم.
الأرقام والتواريخ
٢٠٢٤/١٢/١٥ • ١٢:٣٠ ص • 2024/12/15 • 12:30 PM
مجموعة الحروف
الحروف العربية
أ ب ت ث ج ح خ د ذ ر ز س ش ص ض ط ظ ع غ ف ق ك ل م ن ه و ي
الحروف المتصلة
قُلْ هُوَ ٱللَّهُ أَحَدٌ ١ ٱللَّهُ ٱلصَّمَدُ ٢ لَمْ يَلِدْ وَلَمْ يُولَدْ ٣ وَلَمْ يَكُن لَّهُۥ كُفُوًا أَحَدٌۢ ٤
الأرقام
١٢٣٤٥٦٧٨٩٠ • 1234567890
علامات الترقيم
، . ؛ : ؟ ! " " ' ' ( ) [ ] - – — • …
كود CSS
CSS للخط - يمكن نسخه واستخدامه مباشرة
/* استيراد الخط من Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700&display=swap');
/* استخدام الخط */
.arabic-text {
font-family: ''Readex Pro', sans-serif', '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=Readex+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700&display=swap" rel="stylesheet">رابط CSS Import
استخدم هذا في CSS
CSS Import
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700&display=swap');أمثلة متقدمة للاستخدام
تعلم كيفية استخدام خط Readex Pro بطرق متقدمة مع أمثلة كاملة للـ HTML وCSS وJavaScript
مثال كامل لصفحة HTML تستخدم خط Readex Pro
مثال 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>مثال على استخدام خط Readex Pro</title>
<link href="https://fonts.googleapis.com/css2?family=Readex+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700&display=swap" rel="stylesheet">
<style>
.arabic-text {
font-family: 'Readex Pro', '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">عنوان بخط Readex Pro</h1>
<p class="arabic-text paragraph">
هذا مثال على استخدام خط Readex Pro في صفحة ويب عربية.
يمكنك استخدام هذا الخط لتحسين مظهر النصوص العربية في موقعك.
</p>
<p class="arabic-text paragraph">
الخط يدعم جميع الحروف العربية والأرقام العربية والهندية،
ويوفر تجربة قراءة مريحة وجميلة للمستخدمين.
</p>
</div>
</body>
</html>
أنماط CSS شاملة مع متغيرات وتصميم متجاوب
أنماط CSS متقدمة - مع متغيرات وتصميم متجاوب
/* استيراد الخط من Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700&display=swap');
/* تعريف متغيرات CSS للخط */
:root {
--font-primary: 'Readex Pro', '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('Readex Pro', 'https://fonts.googleapis.com/css2?family=Readex+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700&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)';
});
});