إستخدام خطوط معينة في صفحات الويب يعطي جمالية على النص ويساعد على الإلتزام معايير الويب بدلاً من إستخدام النصوص في الصور. أحد مميزات CSS3 هي إمكانية إستخدام خطوط مرفقة في صفحات الويب عبر خاصية font‪-‬face، وقد كتبت موضوع سابق عن هذه الخاصية ضمن سلسلة تطبيقات على CSS3 ولكن أردت التفصيل أكثر وتصحيح بعض أخطاء الدرس الذي كتبته سابقاً بموضوع جديد.

في هذا الموضوع ستجد كيفية إستخدام خط مرفق على صفحة ويب عبر خاصية font‪-‬face وكيفية إستخدام أكثر من صيغة للخط لتتناسب مع عدة متصفحات ويب ومن ضمنها متصفحات الهواتف النقالة.

المتصفحات الداعمة لهذه الخاصية

لحسن لحظ مستوى دعم المتصفحات لهذه الخاصية جيدة (خصوصاً لمستخدمي متصفح الإكسبلورر) فهو يدعم خاصية face‪-‬font منذ الإصدار الرابع! إلا أن بقية المتصفحات تدعم هذه الخاصية في الإصدارات الحديثة .. هذه مجموعة من المتصفحات الداعمة للخاصية:

  • متصفح سفاري/محرك Webkit: يدعم خاصية font-face منذ الإصدار 3.1، الصيغ المدعومة هي ttf وotf (إخصار لصيغة TrueType وOpenType) أما متصفح سفاري الخاص بنظام iOS فيدعم صيغة SVG لإصدارات iOS القديمة إلى الإصدار 4.1، أما الإصدار 4.2 وما فوق فيدعم ttf وotf.
  • متصفح أوبرا: يدعم خاصية font-face منذ الإصدار العاشر (الإصدار 9.7 من Opera Mobile)، الصيغ المدعومة هي ttf وotf وSVG.
  • متصفح الإكسبلورر: يدعم صيغة font‪-‬face منذ الإصدار الرابع، ويدعم صيغة eot فقط وصيغة WOFF (منذ الإصدار التاسع).
  • متصفح فايرفوكس: يدعم خاصية font‪-‬face منذ الإصدار 3‪.‬5، ويدعم صيغة ttf وotf وWOFF (منذ الإصدار 3‪.‬6).
  • متصفح جوجل كروم: يدعم خاصية font‪-‬face منذ الإصدار الرابع، ويدعم صيغة ttf وotf وWOFF (منذ الإصدار السادس) .. إلا أن الخاصية معطلة بشكل إفتراضي ويجب على المستخدم أن يوافق أو يدعم خيار font‪-‬face لكي تعمل على المتصفح وذلك لأسباب أمنية من طرف جوجل.

صيغة True Type و Open Type

هناك عدة صيغ يمكن إختيارها في عرض الخطوط على صفحات الويب مثل EOT وTTF وOTF وWOFF وغيرها، وجميعها صيغ مختصرة لنوع الخط فأكثر الأنواع التي تستخدم هي TrueType وOpenType ويمكن معرفة لمحة تاريخية لكل منهم ومتى بدأ إستخدام هذه الأنواع.

  • ‏TrueType: تم تطوير هذا النوع من الخطوط من قبل شركة آبل أول مرة وتبنتها شركة مايكروسوفت بعد ذلك في نظام تشغيلها ويندوز (بدايةً من Windows 3‪.‬1)، وأشهر الخطوط العالمية تستخدم هذا النوع من الخطوط.
  • OpenType: تم تطوير هذا النوع من الخطوط من قبل شركة مايكروسوفت ثم إنضمت شركة أدوبي لتطويره في نهاية التسعينات من القرن الماضي وتم إنتاج العديد من الخطوط بهذه الصيغة مع بداية الألفية، ويتميز هذا النوع بدعم أكثر من منصة وإمكانية ظهوره بشكل جيد عند الطباعة وإمكانية إدراج عدد كبير من الحروف للخط الواحد.

صيغة OpenType مدعومة أكثر في متصفح الإكسبلورر بدايةً من الإصدار الرابع حتى الإصدار الأخير، أما TrueType فمستخدم في في بقية الإصدارات والأنظمة (يشمل نظام Android و iOS).

تحويل الخط لعدة صيغ لتتناسب مع متصفحات الويب

إذا رغبت بإستخدام خط مناسب للنصوص فلن تجده بأكثر من صيغة (مثل صيغة OpenType وWOFF وSVG) إلا الخطوط المشهورة (من الخطوط الإنجليزية) إلا أن توفيره بعدة صيغ أصبح ممكنا مع توفر أدوات جديدة في كل فترة.

تطبيق Font Squirrel

أحد هذه الأدوات هو تطبيق Font Squirrel (تطبيق ويب). يمكن إصدار عدة صيغ لخط موجود لديك في الجهاز عبر هذا التطبيق إلا أنه لا يدعم العربية ولكن صاحب التطبيق لديه رغبة في دعم الخطوط العربية عن طريقه.

فقط تقوم بإرفاقه من الموقع وتختار الخصائص المتوفرة قبل التصدير مع الموافقة على إتفاقية إستخدام التطبيق، وبعد عملية التصدير سيعطيك ملف مرفق يحتوي مجموعة الصيغ التي إخترتها للخط مع صفحة تجريبية لرؤية عدة نصوص مختلفة الأحجام بالخط الذي إخترته (تحتاج إلى تعديله بنصوص عربية لرؤية الخطوط العربية، أو تعديل النص عبر إضافة FireBug).

لفهم الخصائص الموجودة قبل الإصدار أنصحك بمراجعتها عبر مقالة عن خاصية font‪-‬face في موقع Smashing Magazine.

تطبيق FreeFontConverter

أحد تطبيقات الويب التي تقوم بتحويل الخط الجهاز إلى خط مستخدم لصفحات الويب بأي صيغة تريدها مثل ttf (TrueType) و otf (OpenType) وقد دلني على هذا الموقع الأخ نواف حريري وهو صاحب عدة مشاريع مفيدة وجميلة في نفس الوقت ومنها تطبيق مصاريف وقد إستخدم هذه الأداة في إستخدام أحد خطوط حسن في موقع التطبيق ويظهر خط Hacen Liner Screen في المتصفح بشكل جميل جداً خصوصاً لمسخدمي نظام الماك.

تحتاج إلى تحويل الخط الموحود في جهازك أو الذي تود أن تستخدمه إلى صيغة ttf و otf (بالرغم من أن الخط الذي تود تحويله يكون عادةً بصيغة ttf إلا أنك بحاجة إلى تحويله إلى نفسه الصيغة عبر هذا التطبيق مرة أخرى لضمان عمله على المتصفح وعدم ظهوره بشكل متقطع -بالنسبة للخطوط العربية- فهو يعطيك الصيغ الخاصة بصفحات الويب) .. وإذا أردت تحويل الخط إلى أي صيغة أخرى يمكن إختيار الصيغة من القائمة التي يوفرها التطبيق.

تطبيق Font2Web

أحد التطبيقات التي تؤدي نفس وظيفة التطبيق السابق ولكن إحتجت إلى هذا التطبيق لتحويل الخط إلى صيغة eot وهذه الصيغة الوحيدة التي يدعمها متصفح الإكسبلورر بجميع إصداراته حالياً! وسيكون مهم ومفيد ايضاً أن تكون هناك صيغة أخرى لمستخدمي متصفح الإكسبلورر، ويمكن الحصول على عدة صيغ أخرى إذا إستخدمت هذا التطبيق مثل صيغة SVG.

مثال عملي: إستخدام خط خاص في تنسيق النصوص

هذا مثال بسيط على كيفية إستخدام خاصية font‪-‬face في إستخدام خطوط مرفقة لصفحة الويب. سأستخدم خطين واحد للعناوين والثاني للفقرات وهما خط K Kamran وخط Hacen Liner Screen (ستجدهم مع المرفقات)، خط K Kamran من الخطوط الجميلة التي تشبه خط الكتابة باليد إلا أن إستخدامه كخط ويب قد لا يكون مناسباً عند البعض وفأغلب إستخداماته للصور ولكن يظهر لي في المثال بشكل جيد كوني أستخدم نظام الماك.

قبل إستخدام الخطوط في صفحة HTML، سأحتاج إلى تحميل الخط على تطبيق Font Squirrel تطبيق FreeFontConverter لتحويله إلى الصيغ المطلوبة (ttf و otf) وكذلك إستخدام تطبيق Font2Web (للحصول على صيغة eot الخاصة بمتصفح الإكسبلورر)، بعد تحميل الخطوط ونقلها بجانب صفحة التي تود إستخدام الخطوط فيها أو في ملف القالب عموماً أو في ملف بإسم fonts (بالطريقة التي تريدها) لإستخدامه في ملف CSS عبر خاصية @font-face.

يمكنك تسميه الخط بالإسم الذي تريده أو بإسمه الحالي (عبر إستخدام خاصية font-family)، شفرة HTML ستكون عبارة عن عرض لأول موضوع كتبته في سلسلة حسن مهاراتك في التدوين في المدونة، فقط سأستخدم بعض العناوين والفقرات في الصفحة فلا يوجد رأس للصفحة وقائمة جانبية، شفرة HTML في بداية قبل كتابة أي شيء:

<!Doctype>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta charset="utf-8" />
	<title>مثال على إستخدام الخطوط</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!-- Wrap -->
<div id="wrap">

	<!-- Article -->
	<div class="article">

	<!-- Your Content -->

	</div>
	<!-- /Article -->

</div>
<!-- /Wrap -->
</body>
</html>

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


/* إستدعاء خط K Karman */
@font-face {
	font-family: "K Karman";
        src: url("fonts/k_kamran.eot"); /* IE 9 للإصدار التاسع من متصفح الإكسبلورر */
    	src: url("fonts/k_kamran.eot?") format("eot"), /* IE 6-8 من الإصدار السادس حتى الثامن من متصفح الإسكبلورر */
             url("fonts/k_kamran.otf") format("opentype"), /* Other browsers للمتصفحات الأخرى */
    	     url("fonts/k_kamran.ttf") format("truetype"); /* Safari, Android, iOS للمتصفحات الهواتف وبقية المتصفحات الحديثة */
}

/* إستدعاء خط Hacen Liner Screen */
@font-face {
	font-family: "Hacen Liner Screen";
        src: url("fonts/hacen_liner_screen.eot"); /* IE 9 للإصدار التاسع من متصفح الإكسبلورر */
        src: url("fonts/hacen_liner_screen.eot?") format("eot"), /* IE 6-8 من الإصدار السادس حتى الثامن من متصفح الإسكبلورر */
             url("fonts/hacen_liner_screen.otf") format("opentype"), /* Other browsers للمتصفحات الأخرى */
             url("fonts/hacen_liner_screen.ttf") format("truetype"); /* Safari, Android, iOS للمتصفحات الهواتف وبقية المتصفحات الحديثة */
}

ملاحظة: تم إستخدام مجلد خاص بالخطوط بإسم fonts، يمكن وضع الخطوط في نفس مسار ملف css لو أردت .. إستخدمت مسار المجلد fonts فقط في الدرس ويفضل ذلك لترتيب ملفات القالب.

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

الآن سأتي دور تنسيق العناوين والفقرات وإستخدام الخطوط بكل سهولة عبر تحديد الخط الذي تم تحميله عبر خاصية font-family أو خاصية font:

/* إستخدام خط Hacen Liner Screen */
.article h1 {
	font: bold 26px 'Hacen Liner Screen', arial, sans-serif;
}

/* إستخدام خط Hacen Liner Screen */
.article h2 {
	font: bold 20px 'Hacen Liner Screen', arial, sans-serif;
}

/* إستخدام خط K Karman */
.article p {
	font: 22px/26px 'K Karman', arial, sans-serif;
}

نتيجة الدرس

فحصت الصفحة على عدة متصفحات، وجميع النتائج كانت جيدة على متصفح فايرفوكس، أوبرا وسفاري (بالنسبة لنظام الماك) .. كذلك على متصفح فايرفوكس، أوبرا، سفاري والإكسبلورر (بالنسبة لنظام الويندوز) لضمان عرض النصوص بالخطوط المختاره فذلك يعتمد على إصدار المتصفح نفسه (شاهد قائمة المتصفحات الداعمة لخاصية @font-face في أعلى الموضوع وستجد كل متصفح مع رقم الإصدار الذي يدعم الخاصية).

مصادر وتفاصيل أكثر عن خاصية font-face

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

خاصية ‪@‬font‪-‬face وحيل مفيدة لخطوط الويب

دعم المتصفحات لخاصية ‪@‬font‪-‬face

خطوط CSS3 (من موقع W3C)