السلام عليكم، سنرى في هذا الدرس تعلم كيفية التعديل على نوع الخطوط في CSS، و ذلك إما بإقحام خطوط آمنة، و إما باستدعاء خطوط من الويب، و إما باستدعاء خطوط من المخدم الخاص.
إقحام الخطوط الآمنة Web Safe Fonts
ما هي الخطوط الآمنة ؟
الخطوط الآمنة و المعروفة إنجليزياً بـ Web Safe Fonts هي خطوط توجد في أنظمة التشغيل الأكثر تداولاً بين الناس، حيث إذا دخل زائر في موقع أو تطبيق بنظام تشغيل يوجد فيه خط من Web Safe Fonts الذي في الموقع أو التطبيق، سيظهر له ذلك الخط في الموقع أو التطبيق، لذا يسمى خط آمن، و من أشهر الخطوط الآمنة هناك Times New Roman ،Georgia ،Arial ،Verdana ،Lucida Console و Comic Sans Ms.
طريقة إقحام الخطوط الآمنة
يتم إقحام الخطوط الآمنة في CSS عبر الخاصية 'FONT-FAMILY' التي هي الخاصية Property المسؤولة عن إقحام الخطوط في CSS، ثم في قيمتها يوضع إسم الخط الآمن.
بالإمكان الإستناد بهذه الصفحة من الويب في انتقاء الخطوط الآمنة المناسبة، و هي صفحة جد مهمة بإسم CSS Fonts Stack تحتوي على أغلب الخطوط الآمنة مرتبة حسب عائلتها، و بالنقر على كل خط في الصفحة سيتم التوجيه إلى صفحته الخاصة في الموقع حيث تحتوي على المعلومات اللازمة للتعريف بالخط كمعاينة شكله و نسبة تواجده في أنظمة التشغيل و قيمته في الخاصية 'FONT-FAMILY' و غيرها من الأمور الأخرى.
يمكن إقحام عدة خطوط آمنة في نفس الخاصية 'FONT-FAMILY'، حيث تخول هذه التقنية لمتصفح الإنترنت أن يجد خط متواجد في نظام تشغيل جهاز الزائر و يظهره في حالة عدم تواجد الخط الأول في نظام التشغيل لجهاز الزائر، و لتطبيق هذه التقنية يجب كتابة أسماء الخطوط الآمنة المراد إقحامها في قيمة نفس الخاصية 'FONT-FAMILY' مفصولين بفاصلة، و يحبذ وضع الخط الأول بين اقتباس مزدوج.
الفيديو التوضيحي للدرس
طريقة استدعاء الخطوط من الويب
يتم استدعاء الخطوط من الويب عبر مواقع الخطوط، حيث يجب نسخ الكود المخصص لاستدعاء الخط منها، و يكون عبارة عن عنصر 'LINK'، ثم لصقه في عنصر 'HEAD' في ملف HTML، ثم كتابة إسم الخط في قيمة الخاصية 'FONT-FAMILY'، لكن جميع الخطوط التي يحتويها موقع الخطوط متعلقة به، أي في حالة عدم تواجد موقع الخطوط، فلن تظهر الخطوط المستدعاة من ذلك الموقع، لذا يجب استدعاء الخطوط من مواقع الخطوط المعروفة، و من أشهرها و أكثرها تداولاً موقع Google Fonts التابع لشركة جوجل، حيث يجب اختيار الخط بتمرير مؤشر الفأرة فوق إسمه، ثم التعديل على حجمه عبر معدِّل البكسل الأحمر أسفل إسمه، و التعديل أيضاً على سمكه عبر علامة التبويب التي بجوار معدِّل البكسل، ثم النقر على علامة الزائد (+) بجانب إسمه لتنسدل صفحة كود الإستدعاء و كود CSS.
من أحسن مزايا موقع Google Fonts أنه يمكن استدعاء العديد من الخطوط بواسطة كود استدعاء واحد بدلاً من كود لكل خط، مما يجعل ملف HTML أخف حجماً حيث يساعد هذا في رقي صداقة السيو SEO، و ذلك بالنقر على علامات الزائد لكل خط مختار، ثم نسخ كود الإستدعاء المشترك من الصفحة المنسدلة و وضعه في 'HEAD' لملف HTML، ثم أخذ أكواد CSS للخطوط المختارة من نفس الصفحة و توظيفها في CSS.
إستدعاء الخطوط من المخدم الخاص
يمكن استدعاء نوع خط من المخدم الخاص، حيث يُكتب في ملف CSS المحدِّد 'FONT-FACE@' ثم في كوده تكتب الخاصية 'FONT-FAMILY' و في قيمتها إسم الخط المراد استدعاؤه، و تكتب أيضاً الخاصية 'SRC' و في قيمتها تكتب كلمة 'URL' ثم قوسين، و داخل القوسين يقحم مسار ملف الخط بين اقتباس مزدوج استناداً بقاعدة المسارات التي رأيناها في درس الصور في HTML، يحبذ إقحام الخط بعدة تنسيقات ملفات الخطوط لكي تلقى دعم جميع متصفحات الإنترنت الكبرى، و بالتالي ضمان رؤية الخط من طرف جميع الزوار، و ذلك بإقحام كل تنسيق ملف الخط في خاصية 'SRC' منفردة داخل تنسيق كود المحدد 'FONT-FACE@'، يمكن الإستناد بهذه الصفحة من الويب حيث تحتوي على جدول دعم أكبر متصفحات الإنترنت لتنسيقات ملفات الخطوط.
بعد استدعاء نوع الخط من المخدم الخاص، يمكن توظيفه بكتابة إسمه في قيمة الخاصية 'FONT-FAMILY' في أكواد CSS.
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس