CSS3 تحديد خط معين

هذا الدرس ضمن سلسلة تطبيقات على CSS3، إستعرضت في المرة السابقة طريقة عرض تعدد للخلفيات في CSS3، درس اليوم يتحدث عن ميزة إختيار الخط الخاص من قبل المصمم والتي تطرقت لها في موضوع مصادر حول تقنية CSS3. يمكن مشاهدة تفاصيلها كاملة عبر أحد صفحات منظمة W3C كذلك.
إختيار خط خاص بالصفحة المنسقة موجودة من قبل ولكن مفعلة أكثر في CSS3.
هذه الميزة لحل إشكاليات تناسب الخط من طرف المصمم وصاحب الموقع والأهم
تناسب مستخدم الموقع. يمكن إختيار خطوط أخرى مناسبة للمصمم ومستخدم الموقع
التي لاتوجد في جهاز المستخدم والذي تعود على الخطوط المعروفة مثل خط
Arial و Tahoma وsans-serif وغيرها موجودة في جهازه أساساً. هذه الميزة
مدعومة في محرك Webkit ومحرك Mozilla/Gecho ومحرك Presto








خاصية font-face


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

1	@font-face {

2

..

3

}

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

1	@font-face {

2	font-family: Delicious;

3	src: url(Delicious-Bold.otf);

4

}

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


المثال الذي سأطرحه بسيط جداً عبارة عن عنوان وفقرة، بحيث يتم تنسيق
العنوان بأحد الخطوط الذي أستخدمها في تصاميمي وهو خط Mahdi، قبل عرض
المثال أبدأ في المثال نقوم بعرض شفرة HTML الخاصة بالدرس:view source
print?

1	<h2>تطبيقات على CSS3</h2>

2

3

<p>نجد الكثير من المواقع تطبق مميزات CSS3 في الوقت الحالي على تصاميمها حتى المواقع المشهورة والكبيرة تجد تصاميمها تستخدم خصائص CSS3. بالرغم من الدعم المحدود من بعض متصفحات الويب لها (مدعومة لمتصفح Firefox 3+ و Safari 3 و Google Crome في الوقت الحالي) إلا أن أولوية إستخدامها موجودة على الأقل كلمسات أخيره على التصميم.</p>

4	<p>عند الإنتهاء من جميع دروس هذه السلسلة سأضع قائمة الدروس من خلال هذه التدوينة، لتكون مرجع لها بشكل دائم وهو سبب كتابتي لهذا الموضوع. لن أضع أي عنوان حالياً ولكن سأبدأ بكتابة دروس CSS3 خلال هذه الأيام وتحديث هذه التدوينة مع كل درس جديد.</p>

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

1	@font-face {

2	font-family: Hacen Typographer Bold;

3	src: url(Hacen Typographer Bold.ttf);

4	font-weight: bold;

5

}

يجب يكون خط Mahdi موجود بجانب ملف CSS حسب ما يشير عنوان الخط في
الشفرة السابقة، إضافةً إلى تحديد الخط في عنوان الفقرة (فقرة تطبيقات على
CSS3) من خلال شفرة CSS التالية:view source
print?

1

h2 {

2	font-family: Hacen Typographer Bold;

3

}

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


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


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


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












http://www.mubde3.net/blog/archives/practices-on-css3-6