الموضوع
اقرأ ايضًا
التعليقات
عن الكاتب
تعليمات
“الهندسة يمكنها أن تصنع حرف مقروء، لكن الفن وحده يستطيع جعل الحروف جميلة، فالفن يبدأ حيث انتهت الهندسة، و يضفي على الحروف شخصية تتخطى مجرد كونها أشكالا هندسية” – بول ستاندرد –
يعتبر نوع الخط المستخدم في التصميم من الأساسيات لجمال شكل التصميم، لا يستطيع أي مصمم سواء كان مصمم ويب أو مصمم جرافيك أو حتى مصمم ملابس أن يتجاهل أو ينكر قيمة الشكل الجمالي للخطوط المحتوى مؤلف من نصوص منسقة والخطوط هي أحد أهم العوامل المساعدة في صياغة هذا التنسيق.
سندع الأمور المبهمة ونتلكم بلغة بسيطة، لكل خط حجم، ويؤثر هذا الحجم على سرعة تحميل صفحة الموقع ومن هنا نجد أنه علينا استخدام خطوط خفيفة تسرع من عملية تحميل الصفحة.
الحديث عن طرق استخدام الخطوط لا تنتهي وهي عديدة وكثيرة جدا والتي من بينها تدوينتنا هذه، واليوم سوف نشرح أهمها وهي الخطوط المستضافة على سيرفرات جوجل ليس هذا فقط بل أتينا لكم بمجموعة خطوط عربية رائعة متناسبة مع الويب
تعريف خطوط جوجل :
باختصار هي مجموعة من الخطوط المستضافة على سيرفرات Google، متاحة للاستخدام المباشر داخل ملفات Css عن طريق @import، تتميز بالثبات العالي والسرعة في التحميل، بالإضافة لتنوع الخطوط المدعومة والتي تصل لأكثر من 600 خط، ومن بينها خطوط تدعم اللغة العربي.
المميزات :
الآن قبل أن نتطرق لطريقة التركيب سأعرض عليكم قائمة أفضل الخطوط بأشكالها مرفقة مع أكوادها
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2.ابحث بإستعمال CTRL+F عن ]]></b:skin> ثم ضع كود الخط الذي تريد فوقه فقط المحدد بالأحمر
3. طريقة الاستخدام في داخل التصميم تكون عن طريق اضافة كود اسم الخط مثال : font-family: 'Amiri', serif; في القسم المراد تطبيق عليه الخط
هنا ننتهي مع الخطوط العربية التي تدعم التضمين في صفحات الويب، للمزيد من الخطوط سواء عربية أو أجنبية ندعوكم بزيارة خطوط جوجل
سندع الأمور المبهمة ونتلكم بلغة بسيطة، لكل خط حجم، ويؤثر هذا الحجم على سرعة تحميل صفحة الموقع ومن هنا نجد أنه علينا استخدام خطوط خفيفة تسرع من عملية تحميل الصفحة.
الحديث عن طرق استخدام الخطوط لا تنتهي وهي عديدة وكثيرة جدا والتي من بينها تدوينتنا هذه، واليوم سوف نشرح أهمها وهي الخطوط المستضافة على سيرفرات جوجل ليس هذا فقط بل أتينا لكم بمجموعة خطوط عربية رائعة متناسبة مع الويب
تعريف خطوط جوجل :
باختصار هي مجموعة من الخطوط المستضافة على سيرفرات Google، متاحة للاستخدام المباشر داخل ملفات Css عن طريق @import، تتميز بالثبات العالي والسرعة في التحميل، بالإضافة لتنوع الخطوط المدعومة والتي تصل لأكثر من 600 خط، ومن بينها خطوط تدعم اللغة العربي.
المميزات :
- سرعة تحميل الخط
- عدم حذف الخط المستضاف
- توافق الخط مع جميع الاجهزة
- خيارات التحكم بالخط
- متوافق مع أي موقع
الآن قبل أن نتطرق لطريقة التركيب سأعرض عليكم قائمة أفضل الخطوط بأشكالها مرفقة مع أكوادها
Noto Sans Kufi Arabic
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);
font-family: 'Noto Sans Kufi Arabic', sans-serif;
الخط الأميري
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/amiri.css);
font-family: 'Amiri', serif;
Droid Arabic Naskh
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css)
font-family: 'Droid Arabic Naskh' , serif;
خط ثابت
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/thabit.css);
font-family: 'Thabit', serif;
خط شهرزاد
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/scheherazade.css);
font-family: 'Scheherazade', serif;
Noto Naskh Arabic UI
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/notonaskharabicui.css);
font-family: 'Noto Naskh Arabic UI', serif;
1. توجه لقالب >> تحرير
2.ابحث بإستعمال CTRL+F عن ]]></b:skin> ثم ضع كود الخط الذي تريد فوقه فقط المحدد بالأحمر
3. طريقة الاستخدام في داخل التصميم تكون عن طريق اضافة كود اسم الخط مثال : font-family: 'Amiri', serif; في القسم المراد تطبيق عليه الخط
هنا ننتهي مع الخطوط العربية التي تدعم التضمين في صفحات الويب، للمزيد من الخطوط سواء عربية أو أجنبية ندعوكم بزيارة خطوط جوجل
في حال كان لديك أي تسائل وتريد تطبيق الخط فقط اترك تعليق يوضح سؤالك، ولا تنسى أن تدعمنا بمشاركة التدوينة إذا نالت إعجابك
ملحوظة:
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻
إرشادات
- موقع : Mediafire
- موقع :file-upload
- باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
- تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
- كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
- إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
تحميل الملفات
أين تجدنا؟
كلمة الختام
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم
حقا خطوط رائعة أعجبني خط الأميري سأستعمله بمدونتي الخاصة بالكتب
ردحذفسؤال اخي حسام الخط الذي تستعمله أنت في المواضيع هل هو Droid Arabic Naskh؟ وأشكرك كثيرا على هذه التدوينة
العفو اخي نورتنا بمرورك هذا، نعم الخط هو Droid Arabic Naskh وإذا كنت ستستعمله فقط أضف إسم خطه لا داعي لإضافة كوده... فهو يشتغل على أية حال وبأي موقع فقد تعجبت بنفسي من ذلك الأمر 😀
حذفصحيح
حذفجيد
ردحذفجميل حساب ومبهر بمواضيعك احب متابعتك دائما ^^
ردحذفتدوينة جميلة
والله خطوط جميلة حتمًا، حتى أنه تصلح
ردحذففي الإستخدام لترجمة الأنمي أيضًا :D شيء
جميل، بس مكتبة الخطوط العربية في غِنًى عن ذلك
ترا ~ هيهيهي! باركك الله حسام كن، بانتظار المزيد... :3
نحط الكود الاحمر قبل ولا بعد ؟ ]]>
ردحذفقبله
حذفأشكرك على مجهودك , و أنا من متابعيك أخي الكريم لكنني لم أفهم المرحلة التالة , واصل
ردحذفتحياتي
يعني أن تضعه مثلا ضمن كود Css العناوين أو الموضوع أو تطبقه على المدونة بأكملها لكن يجب أن تكون لك دراية بالأكواد... تابع هذه التدوينة :
حذفhttp://www.ar1web.com/2014/08/blog-post_22.html
فبها شرح إن واجهتك صعوبة فقط عد مجددا وسأساعدك
مفهمتش الخطوة الاخيرة يعنى الخط لو عايز اغيره فى التدوينات اعمل ايه بالظبط ؟
ردحذفلإضافة خط للمواضيع اضف هذا الكود
حذف.post-body {font-family: Droid Arabic Naskh!important;}
فوق ]]></b:skin>
ثم غير Droid Arabic Naskh بإسم الخط الذي تريد
أخ حسام راسلتك من نموذج الاتصال لتنجز لي مدوّنة او بالاحرى تعدّل لي قالب بالسّعر الّذي تحدّده انت و الدفع سيكون مسبقا باذن الله و لا اعلم ان كانت رسائلي وصلتك
ردحذففارجو ان تجيبني أخي الكريم لاغلق هذا الباب
أهلا بك اخي، ستسعدني خدمتك لكن للأسف لن أتواجد في الأيام المقبلة ولا أعرف حقيقة لكم من الوقت سأغيب... وإن اتيحت لي فرصة فيمكنك التواصل معي على صفحتنا
حذفسانتظر اتصالا منك عندما تكون جاهز و ارجو ان لا تنساني
حذفimed.kr@gmail.com
https://web.facebook.com/garoui.imed
بالله عليك اتّصل بي عندما عندما تكون متواجد و على كل حال ان كان في العمر بقيّة سانتظرك
لو سمحت اريد ان اعرف ما هى الجملة التى تكتبها كمثال ( التى فيها كلمة لوريم ابسون ) اراها فى مواقع كثير ولا ادرى لما يكتبونها .. ارجو الافادة
ردحذف