- الرئيسية
- ما الجديد !
-
الصفحات▼
الصفحات
شرح استخدام خطوط جوجل الجديده فى المواقع العربيه
-
19-10-2013 09:17 صباحاً
-
معلومات الكاتب -
خطوط جوجل العربيه
مع تطور الويب اصبح من الممكن تضمين الخطوط فى صفحات المواقع حتى إذا لم تكن موجودة لدى من يشاهد الموقع.
ويمكن لصاحب الموقع استضافة الخطوط التي يستعملها في موقعه على الموقع نفسه، أو استخدام أحد الخدمات التي تستضيف الخطوط . واشهر هذه الخدمات هى خدمة خطوط جوجل Google Fonts. وتتميز بسهولة تضمين الخطوط في موقعك وتوفيرها لقدر كبير من الخطوط.
والخبر الجديد هنا أنه بدأت خدمه خطوط جوجل فى توفير خطوط عربيه لإستخدامها فى المواقع العربيه ، وهم الآن في مرحلة الاختبار.
وبالتالى اذا كنت صاحب موقع منتدى او مدونه يمكن تجربه هذه الخطوط الجديده وهى رائعه بالمناسبه على موقعك.
مثال لخطوط جوجل : ستايل رقم 5 فى موقع منتدايا سوف تجد ستايل الموقع يستعمل مزيج من خط الدرويد الكوفى وخط الدرويد النسخ .
ويتوفر الآن ستة خطوط العربية وهم :
الخط الأميري الرائع
خط الدرويد الكوفي
خط الدرويد النسخ
خط لطيف
خط شهرزاد
وأخيراً خط "ثابت" وهو خط ذو عرض محدد (fixed-width font).أمثله على الخطوط
تستطيع استخدامهم وتضمينهم في موقعك من خلال الرابط التالي :Google Web Fonts : Early Access
طريقه الإستخدام
أولا الدخول على موقع خطوط جوجل ونسخ رابط ملف الخط المطلوب الموجود باسفل اسم ووصف الخط - مثلا اذا قررت استخدام خط الدرويد الكوفى سيكون كالتالى :
CODE<pre> @import url(http://fonts.googleapis.com/earlyaccess/<b>droidarabickufi.css</b>);</pre> <br />
ثانيا اذا كنت تستخدم ملف .css خارجى لموقعك فقم بفتحه والصق فى اوله الرابط السابق الذى نسخته من موقع خطوط جوجل
اما اذا لم تكن تستخدم ملف css فتوجه الى صفحات موقعك وبين وسمى رأس الصفحه قبل :
الصق الكود التالى :
CODE<pre> <style type="text/css"> @import url(http://fonts.googleapis.com/earlyaccess/thabit.css); </style></pre>
ثالثا تحديد اسم الخط واستخدامه مع النص - واسم الخط المطلوب يجب ان يكون كما هو مكتوب فى موقع خطوط جوجل اسفل رابط الخط - مثلا فى حالتنا هذه خط الدرويد الكوفى سيكون :
[p]
Droid Arabic Kufi</pre>
فيكون الكود كالتالى :
CODE<pre> .style1 { font-family:<b>Droid Arabic Kufi</b>; }</pre> <br />
مع تغيير style1 بما يتناسب مع صفحتك او الستايل الذى تستخدمه
[p]
وهكذا مع باقى الخطوط .. وكل ما تحتاجه من موقع خطوط جوجل هو رابط ملف الخط واسم الخط نفسه ثم تقوم بتضمينه فى موقعك كما سبق الشرح
</pre>
شرح فيديو لإضافه الخطوط الى منتديات pbboard ومدونات ورد بريس
مع اطيب تحياتى-
تم تحرير الموضوع بواسطة :mezo بتاريخ: 19-10-2013 09:21 صباحاً
-
-
شرح استخدام خطوط جوجل الجديده فى المواقع العربيه19-10-2013 02:14 مساءً [2]
-
معلومات الكاتب -
إستفسار:
أين الخطوط العربية كلها إنجليزية.
تحياتي.....
-
تم تحرير المشاركة بواسطة :محمد بتاريخ:19-10-2013 02:15 مساءً
-
-
شرح استخدام خطوط جوجل الجديده فى المواقع العربيه19-10-2013 04:24 مساءً [3]
-
معلومات الكاتب -
شكرا لك على هذا أخي لكن هناك مشكلة عدم توافقه مع قوقل كروم أي عند تصفح الموقع بمتصفح قوقل كروم google Chrome
حيث أن هناك تشوه
في الأول طننت أن المشكلة عندي فقط لكن بعد التجربة على عدة مواقع اتضح فعلا أن هناك مشكل
ومن المواقع موقعك أنت الذي وضعته في الموضوع انظر إلى الصور عند التصفح بكروم ثم بغيره :
1- قوقل كروم :
2- موزيلا + إكسبلورر :
سأبحث عن حل لهذه المشكلة وإن وجدت سوف أضعه هنا إن شاء الله أو أحد الإخوة يعطينا حلا لمن لديه حل.
تنبيه : المشكلة فقط مع خطي : Droid Arabic Kufi و Droid Arabic Naskh فقط أما الباقي فلا توجد مشكلة.
-
تم تحرير المشاركة بواسطة :محمد333 بتاريخ:19-10-2013 05:09 مساءً
-
-
شرح استخدام خطوط جوجل الجديده فى المواقع العربيه19-10-2013 04:40 مساءً [4]
-
معلومات الكاتب -
مرحبا أخي بارك الله فيك على الشّرح المميّز
عندي مداخلة بخصوص ال css import بحيث أنّ معظم محرّكات البحث تُحذّر من استخدام هذه الخاصّية لتجنّب الاستدعاءات الغير متوازية
فعوض أن نكتب
CODE<br /> @import url(http://fonts.googleapis.com/earlyaccess/amiri.css);<br /> <br />
في ورقة css
يُفضّل كتابة
CODE<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]
-
معلومات الكاتب
-
المشاركة الأصلية كتبت بواسطة: Mr King مرحبا أخي بارك الله فيك على الشّرح المميّز
عندي مداخلة بخصوص ال import بحيث أنّ معظم محرّكات البحث تُحذّر من استخدام هذه الخاصّية لتجنّب الاستدعاءات الغير متوازية
فعوض أن نكتب
CODE<br /> @import url(http://fonts.googleapis.com/earlyaccess/amiri.css);<br /> <br />
في ورقة css
يُفضّل كتابة
CODE<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/amiri.css" />
السلام عليكم
أخي الكريم قوقل هو الذي طلب استخدام import وهو في نفس الوقت أكبر وأقوى وأشهر محركات البحث
فهل يُعقل أن يطلب استخدامها وفي نفس الوقت يحذر منها ؟
-
تم تحرير المشاركة بواسطة :محمد333 بتاريخ:19-10-2013 05:17 مساءً
-
-
شرح استخدام خطوط جوجل الجديده فى المواقع العربيه20-10-2013 03:08 مساءً [10]
-
معلومات الكاتب
-
المشاركة الأصلية كتبت بواسطة: mezo ومثلما قال الأخ محمد 333 غريب انه يضعوا الطريقه بهذا الشكل مع انهم يعلموا انها تسبب فى بطئ التحميل
ولكن ربما لانها فى طور التجربه والغرض منها سيكون التجربه فقط
والله اعلم
مرحبا أخي شكرا على تجاوبك،
بالنسبة لخاصّية css import وخاصّية اللّينك فلهما نفس الدّور، غير أنّ خاصّية css import تتسبّب في تأخّر إقلاع الصّفحه
(حتّى محرّك البحث ياهو "بينج" يقول نفس الشّيء)
+ بالنسبة للّي ما يقدرش يعدّل على القوالب (مثلا مستخدمي أحلى منتدى، النسخة الأخيره) لايمكنهم سوى استعمال خاصّية css import وبالتّالي أظنّ أنّ خاصّية اللّينك لن تنفعهم
-
-
-
