تحميل...

خطوط عربية

Alhurra

الحرة

sans-serifarabiclatinالحرةAlhurraحرة

النوع:sans-serif

الأوزان:3 وزن

النمط:عادي فقط

الإصدار:

إعدادات الخط

حجم الخط

40 px

ارتفاع السطر

1.5

لون النص

لون الخلفية

وزن الخط

خفيف (300)

عادي (400)

عريض (700)

نمط الخط

عادي

اتجاه النص

من اليمين لليسار

من اليسار لليمين

تلقائي

معاينة الخط

إعادة تعيين

النص التجريبي

نص مخصص

الأبجدية العربية

الأرقام العربية والهندية

جملة تحتوي على جميع الحروف

شعر عربي

نص حديث

نص ديني

نص مختلط (عربي/إنجليزي)

الحمد لله رب العالمين

نصوص تجريبية

الحمد لله رب العالمين

أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ

طباعة النص العربي

مرحبا بكم في عالم الخطوط العربية

هذا نص تجريبي لعرض الخط

النص العربي الجميل

تطوير وتصميم المواقع

الخط العربي فن وإبداع

التصميم الجرافيكي الحديث

خطوط عربية مميزة وجميلة

أشكال الخط المتاحة

خفيف

الحمد لله رب العالمين

 خفيف  
 
نسخ
font-family: 'Alhurra', 'Noto Sans Arabic', Arial, sans-serif;
font-weight: 300;
font-style: normal;

عادي

الحمد لله رب العالمين

 عادي  
 
نسخ
font-family: 'Alhurra', 'Noto Sans Arabic', Arial, sans-serif;
font-weight: 400;
font-style: normal;

عريض

الحمد لله رب العالمين

 عريض  
 
نسخ
font-family: 'Alhurra', 'Noto Sans Arabic', Arial, sans-serif;
font-weight: 700;
font-style: normal;

عينات الخط

أحجام مختلفة

12px

مرحباً بكم في عالم الخطوط العربية الجميلة

16px

مرحباً بكم في عالم الخطوط العربية الجميلة

20px

مرحباً بكم في عالم الخطوط العربية الجميلة

24px

مرحباً بكم في عالم الخطوط العربية الجميلة

32px

مرحباً بكم في عالم الخطوط العربية الجميلة

40px

مرحباً بكم في عالم الخطوط العربية الجميلة

48px

مرحباً بكم في عالم الخطوط العربية الجميلة

64px

مرحباً بكم في عالم الخطوط العربية الجميلة

أنواع النصوص

العناوين

الذكاء الاصطناعي يغير العالم

النص الأساسي

تشهد التكنولوجيا الحديثة تطوراً سريعاً في مجال الذكاء الاصطناعي، حيث تساهم هذه التقنيات في تحسين حياتنا اليومية وتوفير حلول مبتكرة للتحديات المعاصرة. من المتوقع أن تستمر هذه الثورة التقنية في تشكيل مستقبل البشرية نحو الأفضل.

النص الصغير

هذا نص توضيحي صغير يُستخدم عادة في التفاصيل والملاحظات والتوضيحات الإضافية في التصميم.

الأرقام والتواريخ

٢٠٢٤/١٢/١٥ • ١٢:٣٠ ص • 2024/12/15 • 12:30 PM

مجموعة الحروف

الحروف العربية

أ ب ت ث ج ح خ د ذ ر ز س ش ص ض ط ظ ع غ ف ق ك ل م ن ه و ي

الحروف المتصلة

قُلْ هُوَ ٱللَّهُ أَحَدٌ ١ ٱللَّهُ ٱلصَّمَدُ ٢ لَمْ يَلِدْ وَلَمْ يُولَدْ ٣ وَلَمْ يَكُن لَّهُۥ كُفُوًا أَحَدٌۢ ٤

الأرقام

١٢٣٤٥٦٧٨٩٠ • 1234567890

علامات الترقيم

، . ؛ : ؟ ! " " ' ' ( ) [ ] - – — • …

كود CSS

 CSS للخط الخاص - يمكن نسخه واستخدامه مباشرة 
 
نسخ
/* تعريف الخط الخاص */
@font-face {
  font-family: 'Alhurra';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/light/Alhurra-Light.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/light/Alhurra-Light.woff') format('woff'),
       url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/light/Alhurra-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Alhurra';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/regular/Alhurra-Regular.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/regular/Alhurra-Regular.woff') format('woff'),
       url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/regular/Alhurra-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Alhurra';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/bold/Alhurra-Bold.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/bold/Alhurra-Bold.woff') format('woff'),
       url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/bold/Alhurra-Bold.ttf') format('truetype');
}

/* استخدام الخط */
.arabic-text {
  font-family: ''Alhurra', 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;
}

خيارات التحميل

رابط الخط الخاص (HTML)

استخدم هذا الرابط في HTML

 HTML Link 
 
نسخ
<link href="https://arfonts.pages.dev/css?family=alhurra:300,400,700" rel="stylesheet">

رابط CSS Import

استخدم هذا في CSS

 CSS Import 
 
نسخ
@import url('https://arfonts.pages.dev/css?family=alhurra:300,400,700');

ملفات الخط المباشرة

روابط مباشرة لملفات الخط

خفيف : تحميل الملف

عادي : تحميل الملف

عريض : تحميل الملف

CSS كامل للخط

كود CSS كامل مع جميع @font-face

 CSS Code 
 
نسخ
@font-face {
  font-family: 'Alhurra';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/light/Alhurra-Light.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/light/Alhurra-Light.woff') format('woff'),
       url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/light/Alhurra-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Alhurra';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/regular/Alhurra-Regular.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/regular/Alhurra-Regular.woff') format('woff'),
       url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/regular/Alhurra-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Alhurra';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/bold/Alhurra-Bold.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/bold/Alhurra-Bold.woff') format('woff'),
       url('https://cdn.jsdelivr.net/gh/qlbaz/fonts@main/alhurra/bold/Alhurra-Bold.ttf') format('truetype');
}

أمثلة متقدمة للاستخدام

تعلم كيفية استخدام خط Alhurra بطرق متقدمة مع أمثلة كاملة للـ HTML وCSS وJavaScript

مثال HTML كامل

 مثال كامل لاستخدام خط Alhurra 
 
نسخ
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مثال على استخدام خط Alhurra</title>

  <!-- طريقة 1: استخدام link tag -->
  <link href="https://arfonts.pages.dev/css?family=alhurra:300,400,700" rel="stylesheet">

  <!-- أو طريقة 2: استخدام CSS import في style tag -->
  <style>
    @import url('https://arfonts.pages.dev/css?family=alhurra:300,400,700');

    .custom-font {
      font-family: 'Alhurra', 'Noto Sans Arabic', Arial, sans-serif;
      font-size: 24px;
      line-height: 1.6;
      direction: rtl;
      text-align: right;
    }

    .title {
      font-weight: 700;
      font-size: 32px;
      margin-bottom: 20px;
    }

    .content {
      font-weight: 400;
      color: #333;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="custom-font title">مرحباً بكم في عالم الخطوط العربية</h1>
    <p class="custom-font content">
      هذا مثال على استخدام خط Alhurra في صفحة ويب.
      يمكنكم استخدام هذا الخط في مشاريعكم بكل سهولة.
    </p>
  </div>
</body>
</html>

استخدام CSS

 أمثلة CSS متقدمة 
 
نسخ
/* استيراد خط Alhurra */
@import url('https://arfonts.pages.dev/css?family=alhurra:300,400,700');

/* أو استخدام link في HTML */
/* <link href="https://arfonts.pages.dev/css?family=alhurra:300,400,700" rel="stylesheet"> */

/* استخدام الخط في CSS */
.arabic-text {
  font-family: 'Alhurra', 'Noto Sans Arabic', Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  direction: rtl;
  text-align: right;
}

/* العناوين */
.heading {
  font-family: 'Alhurra', 'Noto Sans Arabic', Arial, sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
  margin-bottom: 16px;
}

/* النصوص الصغيرة */
.small-text {
  font-family: 'Alhurra', 'Noto Sans Arabic', Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #666;
}

/* تطبيق مع CSS Grid أو Flexbox */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  font-family: 'Alhurra', 'Noto Sans Arabic', Arial, sans-serif;
}

JavaScript متقدم

 تحميل ديناميكي للخط 
 
نسخ
// JavaScript لتحميل الخط ديناميكياً
function loadCustomFont() {
  // إنشاء link element
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://arfonts.pages.dev/css?family=alhurra:300,400,700';

  // إضافة الـ link للـ head
  document.head.appendChild(link);

  // التأكد من تحميل الخط قبل الاستخدام
  link.onload = function() {
    console.log('تم تحميل خط Alhurra بنجاح');

    // تطبيق الخط على العناصر
    applyFontToElements();
  };
}

function applyFontToElements() {
  // البحث عن العناصر المطلوب تغيير خطها
  const elements = document.querySelectorAll('.arabic-text');

  elements.forEach(element => {
    element.style.fontFamily = "'Alhurra', 'Noto Sans Arabic', Arial, sans-serif";
  });
}

// تحميل الخط عند تحميل الصفحة
document.addEventListener('DOMContentLoaded', loadCustomFont);

// أو استخدام Web Font Loader
WebFont.load({
  custom: {
    families: ['Alhurra'],
    urls: ['https://arfonts.pages.dev/css?family=alhurra:300,400,700']
  },
  active: function() {
    console.log('Alhurra font is active');
  },
  inactive: function() {
    console.log('Alhurra font failed to load');
  }
});

مثال React

 استخدام في React 
 
نسخ
// React Component Example
import React from 'react';
import './CustomFont.css'; // ملف CSS يحتوي على @import

const ArabicTextComponent = () => {
  const fontStyle = {
    fontFamily: "'Alhurra', 'Noto Sans Arabic', Arial, sans-serif",
    fontSize: '18px',
    lineHeight: '1.6',
    direction: 'rtl',
    textAlign: 'right'
  };

  return (
    <div className="arabic-content">
      <h1 style={{...fontStyle, fontSize: '32px', fontWeight: '700'}}>
        العنوان الرئيسي
      </h1>
      <p style={fontStyle}>
        هذا مثال على استخدام خط Alhurra في تطبيق React.
        يمكنكم استخدام هذا الخط بسهولة في مكوناتكم.
      </p>
    </div>
  );
};

export default ArabicTextComponent;

/* CustomFont.css */
@import url('https://arfonts.pages.dev/css?family=alhurra:300,400,700');

مثال Vue.js

 استخدام في Vue.js 
 
نسخ
<!-- Vue.js Component Example -->
<template>
  <div class="arabic-content">
    <h1 :style="titleStyle">العنوان الرئيسي</h1>
    <p :style="textStyle">
      هذا مثال على استخدام خط Alhurra في تطبيق Vue.js
    </p>
  </div>
</template>

<script>
export default {
  name: 'ArabicTextComponent',
  data() {
    return {
      titleStyle: {
        fontFamily: "'Alhurra', 'Noto Sans Arabic', Arial, sans-serif",
        fontSize: '32px',
        fontWeight: '700',
        direction: 'rtl',
        textAlign: 'right'
      },
      textStyle: {
        fontFamily: "'Alhurra', 'Noto Sans Arabic', Arial, sans-serif",
        fontSize: '18px',
        lineHeight: '1.6',
        direction: 'rtl',
        textAlign: 'right'
      }
    }
  }
}
</script>

<style>
@import url('https://arfonts.pages.dev/css?family=alhurra:300,400,700');
</style>

معاينة مباشرة

مثال مباشر لخط Alhurra

هذا نص تجريبي يوضح كيف يبدو الخط في الاستخدام الفعلي.

يمكنكم استخدام هذا الخط في مشاريعكم بنسخ الكود أعلاه.

نصائح للتكامل

• استخدم font-display: swap لتحسين الأداء
• ضع خط احتياطي مثل 'Noto Sans Arabic' في حالة فشل التحميل
• استخدم preload للخطوط المهمة: <link rel="preload" href="https://arfonts.pages.dev/css?family=alhurra:300,400,700" as="style">
• اختبر الخط على أجهزة مختلفة للتأكد من التوافق
• استخدم أوزان مختلفة للخط لتحسين التسلسل الهرمي البصري