طريقة إستخدام الخطوط غوغل
أولا: إستدعاء الخط
هناك طريقتين لإستدعاء الخطوط الأولى عن طريق كود
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Scheherazade”>
و فى هذه الحالة يوضع الكود بعد فتح كود <head>
فى المواقع الثابتة أما فى الورد بريس فيتم وضعه بعد كود <head>
فى ملف ال header.php الخاص بالقالب المستخدم
و الثانية عن طريق كود
ملحوظة المرجو تصحيح الرابط قبل الإستعماله لأنه يظهر كوصلة ممنوعة لداك قمت بتشويهه
و فى هذه الحاله يوضع الكود داخل ملف الستايل شيت الخاص بالقالب.
ثانيا : إستخدام الخط فى الأماكن المطلوبة مثل ال h1 أو الفقرات
و ذلك عن طريق ملف الستايل حيث توضع عائلة الخط كالتالى font-family: ‘Scheherazade’, serif;
مميزات خطوط جوجل للويب عن إستخدام خاصية @font-face المدعومة من css3
1- سهولة الإستخدام و التركيب
2- دعم كل المتصفحات لها
3- الخطوط مستضافة على موقع جوجل ولا تحتاج لإستضافتها فى موقعك
4- دعمها لتأثيرات ال css3 الجديدة على الخطوط
مثل shadow-multiple و font-effect-3d و المزيد يمكنك زيارة صفحة التأثيرات من هنا
( ملحوظة :هذه الخاصية قيد التجربة و ليست مدعومة من قبل جميع المتصفحات )
عيوب إستخدام خطوط جوجل :
- تقوم بعمل حجب للداتا لحين تحميل الخط و تظهر المشكله بوضوح
عند تحميل أكثر من خط فى نفس الوقت و للتغلب
على هذه المشكلة أتاحت لنا جوجل تحميل كل الخطوط فى كود واحد
مثال: http : //fonts.....googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
ملحوظة المرجو تصحيح الرابط قبل الإستعماله لأنه يظهر كوصلة ممنوعة لداك قمت بتشويهه
حيث نستخدم كود الإستدعاء العادى مع الفصل بين أسماء الخطوط أو الفاميلي بحرف “|”
( ملحوظة ضم إستدعاء أكثر من خط فى كود واحد غير مدعوم من قبل كود الإستدعاء @import)
كيفيه جعل الخط عريض أو مائل :
عن طريق إضافة كلمة bold الى اسم العائلة مثال
http : // fonts........googleapis.......com / css?family=Tangerine:bold,bolditalic
ملحوظة المرجو تصحيح الرابط قبل الإستعماله لأنه يظهر كوصلة ممنوعة لداك قمت بتشويهه
و هذا هو جدول بالخواص و اكوادها
0 التعليقات:
إرسال تعليق