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