شرح اختيار خط معين في سي اس اس ثري css3

بسم الله الرحمن الرحيم

شرح اختيار خط معين في سي اس اس ثري css3

خاصية font-face

خاصية font-face مخصصة لوضع تفاصيل الخط الذي تريد إضافته إلى تنسيق الصفحة، مثل نوع خط وعنوان الخط. وتكتب قبل تنسيق الفقرة أو العنوان أو النص الذي تريد تنسيقه بشكل عام. تكتب هذه الخاصية كما توضح شفرة CSS التالية:

@font-face {

–

}

لو إفترضنا أننا نريد إستخدام خط Delicious في عنوان للفقرة، نحدد الخط وعنوانه الخارجي في خاصية font-face بهذه الطريقة:

}

كما أنه يفضل أن يكون عنوان الخارجي للخط مرافق لملف CSS أو يمكنك كتابة عنوانه المحدد، في المثال السابق ستجد أن عنوان الخط يشير إلى Delicious-Bold.otf وهو موجود بجانب ملف CSS.

مثال عملي: إختيار خط لعنوان فقرة

المثال الذي سأطرحه بسيط جداً عبارة عن عنوان وفقرة، بحيث يتم تنسيق العنوان بأحد الخطوط الذي أستخدمها في تصاميمي وهو خط Hacen Typographer Bold، قبل عرض المثال أبدأ في المثال نقوم بعرض شفرة HTML الخاصة بالدرس:

بعد ذلك نستخدام خاصية font-face في تحديد خط Hacen Typographer Bold بإسمه وعنوانه:

@font-face {

}

يجب يكون خط Hacen Typographer Bold موجود بجانب ملف CSS حسب ما يشير عنوان الخط في الشفرة السابقة، إضافةً إلى تحديد الخط في عنوان الفقرة (فقرة تطبيقات على CSS3) من خلال شفرة CSS التالية:

}

هذه الصورة تمثل النتيجة كاملة عبر متصفح Safari:

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

عند إختيارك للخطوط المناسبة لك فإن نتيجة ظهور هذه الخطوط ستكون في كاملة في متصفح Safari، الإصدارات الأخيرة من متصفح Firefox و Opera لا يدعمان إختيار الخطوط بشكل صحيح وخاصة عند إختيار خط عربي ولكن النتيجة تظهر بشكل ممتاز في متصفح Safari وهذا بفضل ميزة تنعيم الخط Font Smoothing، هذه صورة للمثال السابق في عدة متصفحات بإستخدام خاصية font-face:

لذا أنصح بإستخدام بدائل لخاصية font-face إذا لم يدعم المتصفح الخاصية بشكل صحيح، يمكنك رؤية بعض تفاصيل دعم متصفح الفايرفوكس لخاصية Font-Face مع المقارنة ببقية المتصفحات على سبيل المثال.