شرح استخدام خطوط جوجل الجديده فى المواقع العربيه

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


موضوع مغلق

الصفحة 1 من 2 < 1 2 > الأخيرة »


19-10-2013 09:17 صباحا
mezo
عضـو مشارك
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 26-10-2010
رقم العضوية : 873
المشاركات : 17
الجنس : ذكر
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 0
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.1
 offline 


خطوط جوجل العربيه
 مع تطور الويب اصبح من الممكن تضمين الخطوط فى صفحات المواقع حتى إذا لم تكن موجودة لدى من يشاهد الموقع.

ويمكن لصاحب الموقع استضافة الخطوط التي يستعملها في موقعه على الموقع نفسه، أو استخدام أحد الخدمات التي تستضيف الخطوط . واشهر هذه الخدمات هى خدمة خطوط جوجل Google Fonts. وتتميز بسهولة تضمين الخطوط في موقعك وتوفيرها لقدر كبير من الخطوط.

والخبر الجديد هنا أنه بدأت خدمه خطوط جوجل فى توفير خطوط عربيه لإستخدامها فى المواقع العربيه ، وهم الآن في مرحلة الاختبار.
وبالتالى اذا كنت صاحب موقع منتدى او مدونه يمكن تجربه هذه الخطوط الجديده وهى رائعه بالمناسبه على موقعك.
مثال لخطوط جوجل : ستايل رقم 5 فى موقع منتدايا سوف تجد ستايل الموقع يستعمل مزيج من خط الدرويد الكوفى وخط الدرويد النسخ .

ويتوفر الآن ستة خطوط العربية وهم :
الخط الأميري الرائع
خط الدرويد الكوفي
خط الدرويد النسخ
خط لطيف
خط شهرزاد
وأخيراً خط "ثابت" وهو خط ذو عرض محدد (fixed-width font).

أمثله على الخطوط
md2g

تستطيع استخدامهم وتضمينهم في موقعك من خلال الرابط التالي :

Google Web Fonts : Early Access
 

طريقه الإستخدام

أولا الدخول على موقع خطوط جوجل ونسخ رابط ملف الخط المطلوب الموجود باسفل اسم ووصف الخط -  مثلا اذا قررت استخدام خط الدرويد الكوفى سيكون كالتالى  :
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);


ثانيا اذا كنت تستخدم ملف .css خارجى لموقعك فقم بفتحه والصق فى اوله الرابط السابق الذى نسخته من موقع خطوط جوجل
اما اذا لم تكن تستخدم ملف css فتوجه الى صفحات موقعك وبين وسمى رأس الصفحه قبل :
الصق الكود التالى :
<style type="text/css">
@import url(http://fonts.googleapis.com/earlyaccess/thabit.css);
</style>


ثالثا تحديد اسم الخط  واستخدامه مع النص -  واسم الخط المطلوب يجب ان يكون كما هو مكتوب فى موقع خطوط جوجل اسفل رابط الخط - مثلا فى حالتنا هذه خط الدرويد الكوفى سيكون :
Droid Arabic Kufi

فيكون الكود كالتالى :
.style1 {
font-family:Droid Arabic Kufi;
}

مع تغيير style1 بما يتناسب مع صفحتك او الستايل الذى تستخدمه

وهكذا مع باقى الخطوط .. وكل ما تحتاجه من موقع خطوط جوجل هو رابط ملف الخط واسم الخط نفسه ثم تقوم بتضمينه فى موقعك كما سبق الشرح

شرح فيديو لإضافه الخطوط الى منتديات pbboard ومدونات ورد بريس

مع اطيب تحياتى


تم تحرير الموضوع بواسطة :mezo
بتاريخ:19-10-2013 09:21 صباحا


19-10-2013 02:00 مساء
مشاهدة مشاركة منفردة [1]
محمد
عضـو متميز
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 15-10-2012
رقم العضوية : 2494
المشاركات : 609
الدولة : ..::اليمن السعيد::..
الجنس : ذكر
تاريخ الميلاد : 10-1-1994
الدعوات : 18
يتابعهم : 3
يتابعونه : 1
قوة السمعة : 2100
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.0
 offline 
look/images/icons/i1.gif شرح استخدام خطوط جوجل الجديده فى المواقع العربيه

رائع أخي ها الشرح رااائع جداً


19-10-2013 02:14 مساء
مشاهدة مشاركة منفردة [2]
محمد
عضـو متميز
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 15-10-2012
رقم العضوية : 2494
المشاركات : 609
الدولة : ..::اليمن السعيد::..
الجنس : ذكر
تاريخ الميلاد : 10-1-1994
الدعوات : 18
يتابعهم : 3
يتابعونه : 1
قوة السمعة : 2100
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.0
 offline 
look/images/icons/i1.gif شرح استخدام خطوط جوجل الجديده فى المواقع العربيه
إستفسار:
أين الخطوط العربية كلها إنجليزية.
تحياتي.....2flw5


تم تحرير المشاركة بواسطة :محمد
بتاريخ:19-10-2013 02:15 مساء


19-10-2013 04:24 مساء
مشاهدة مشاركة منفردة [3]
محمد333
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 17-04-2011
رقم العضوية : 1448
المشاركات : 384
الجنس : ذكر
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 232
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif شرح استخدام خطوط جوجل الجديده فى المواقع العربيه
شكرا لك على هذا أخي لكن هناك مشكلة عدم توافقه مع قوقل كروم أي عند تصفح الموقع بمتصفح قوقل كروم google Chrome

حيث أن هناك تشوه

في الأول طننت أن المشكلة عندي فقط لكن بعد التجربة على عدة مواقع اتضح فعلا أن هناك مشكل

ومن المواقع موقعك أنت الذي وضعته في الموضوع انظر إلى الصور عند التصفح بكروم ثم بغيره :

1- قوقل كروم :


MzQ3MTc1MQ656519-10-2013%2014-12-34

MjI5MzE1MQ333319-10-2013%2014-13-57

2- موزيلا + إكسبلورر :

MzIxODAxMQ27273

MzIwNDgwMQ17174


سأبحث عن حل لهذه المشكلة وإن وجدت سوف أضعه هنا إن شاء الله أو أحد الإخوة يعطينا حلا لمن لديه حل.

تنبيه : المشكلة فقط مع خطي : Droid Arabic Kufi و Droid Arabic Naskh فقط أما الباقي فلا توجد مشكلة.
 
  19-10-2013 14-12-34.png   تحميل png 19-10-2013 14-12-34.png مرات التحميل :(7)
الحجم :(4.84) KB
  19-10-2013 14-13-57.png   تحميل png 19-10-2013 14-13-57.png مرات التحميل :(5)
الحجم :(6.381) KB
 



تم تحرير المشاركة بواسطة :محمد333
بتاريخ:19-10-2013 05:09 مساء


19-10-2013 04:40 مساء
مشاهدة مشاركة منفردة [4]
Mr King
PBB Staff
rating
العضو غائب
معلومات الكاتب ▼
تاريخ الإنضمام : 27-11-2012
رقم العضوية : 2642
المشاركات : 3209
الدولة : morocco
الجنس : ذكر
تاريخ الميلاد : 1-1-1987
الدعوات : 3
يتابعهم : 2
يتابعونه : 29
قوة السمعة : 18610
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif شرح استخدام خطوط جوجل الجديده فى المواقع العربيه
مرحبا أخي بارك الله فيك على الشّرح المميّز

عندي مداخلة بخصوص ال css import  بحيث أنّ معظم محرّكات البحث تُحذّر من استخدام هذه الخاصّية لتجنّب الاستدعاءات الغير متوازية

فعوض أن نكتب

@import url(http://fonts.googleapis.com/earlyaccess/amiri.css);

في ورقة css
يُفضّل كتابة

<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/amiri.css" />

في قالب headinclud قبل غلق الوسم head مع الحفاظ على الترتيب




مثال على ذلك :
ملحق تمكين الزوار والأعضاء من تنسيق المواضيع وتغيير الخطوط Jquery Fontz


المشاركة الأصلية كتبت بواسطة: محمد333 »
شكرا لك على هذا أخي لكن هناك مشكلة عدم توافقه مع قوقل كروم أي عند تصفح الموقع بمتصفح قوقل كروم google Chrome

حيث أن هناك تشوه

نفس المشكله مع متصفّح أوبرا

 



تم تحرير المشاركة بواسطة :Mr King
بتاريخ:20-10-2013 01:58 صباحا


19-10-2013 05:15 مساء
مشاهدة مشاركة منفردة [5]
محمد333
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 17-04-2011
رقم العضوية : 1448
المشاركات : 384
الجنس : ذكر
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 232
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif شرح استخدام خطوط جوجل الجديده فى المواقع العربيه
المشاركة الأصلية كتبت بواسطة: Mr King »
مرحبا أخي بارك الله فيك على الشّرح المميّز

عندي مداخلة بخصوص ال import  بحيث أنّ معظم محرّكات البحث تُحذّر من استخدام هذه الخاصّية لتجنّب الاستدعاءات الغير متوازية

فعوض أن نكتب

@import url(http://fonts.googleapis.com/earlyaccess/amiri.css);

في ورقة css
يُفضّل كتابة

<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/amiri.css" />

 


السلام عليكم

أخي الكريم قوقل هو الذي طلب استخدام import وهو في نفس الوقت أكبر وأقوى وأشهر محركات البحث

فهل يُعقل أن يطلب استخدامها وفي نفس الوقت يحذر منها ؟




تم تحرير المشاركة بواسطة :محمد333
بتاريخ:19-10-2013 05:17 مساء


19-10-2013 05:20 مساء
مشاهدة مشاركة منفردة [6]
Mr King
PBB Staff
rating
العضو غائب
معلومات الكاتب ▼
تاريخ الإنضمام : 27-11-2012
رقم العضوية : 2642
المشاركات : 3209
الدولة : morocco
الجنس : ذكر
تاريخ الميلاد : 1-1-1987
الدعوات : 3
يتابعهم : 2
يتابعونه : 29
قوة السمعة : 18610
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif شرح استخدام خطوط جوجل الجديده فى المواقع العربيه


الصفحة 1 من 2 < 1 2 > الأخيرة »


الكلمات الدلالية
لا يوجد كلمات دلالية ..







الساعة الآن 03:23 صباحا