مقدمة
تتيح لنا ميزة @font-face من CSS3 استخدام خطوط طباعية مخصصة على الويب بطريقة يسهل الوصول إليها ومعالجتها وقابلية للتوسع. ولكن، قد تقول، "لماذا نستخدم @font-face إذا كان لدينا Cufon وsIFR واستخدام النص في الصور؟" بعض مزايا الاستفادة من @font-face للخطوط المخصصة:
- إمكانية البحث بالكامل حسب "البحث" (
ctrl-F) - إمكانية الوصول إلى التقنيات المساعدة مثل برامج قراءة الشاشة
- يمكن ترجمة النص من خلال خدمات الترجمة أو الترجمة في المتصفّح.
- بإمكان CSS تعديل العرض المطبعي بشكل كامل:
line-heightوletter-spacingوtext-shadowوtext-alignوأدوات اختيار مثل::first-letterو::first-line.
@font-face في جوهره
في الأساس، أعلنّا عن خط جديد مخصَّص عن بُعد ليُستخدَم على النحو التالي:
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.ttf');
}
ثم ضعه للاستخدام:
h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }
في تعريف @font-face هذا، نستخدم السمة font-family لتسمية الخط بوضوح. وقد يكون أي نوع من هذه النصوص مهما كان الخط المستخدَم، فfont-family: 'SuperDuperComicSans'; سيعمل بشكل جيد، ولكن قد لا يكون ذا صلة بسمعتك. في السمة src، نشير إلى المكان الذي يمكن فيه للمتصفّح العثور على مادة عرض الخط. استنادًا إلى المتصفّح، بعض أنواع الخطوط الصالحة هي eot أو ttf أو otf أو svg أو معرّف الموارد المنتظم (URI) للبيانات التي تتضمّن بيانات الخط بأكملها بشكل مضمّن.
| otf وttf | svg | woff | إيوت | |
|---|---|---|---|---|
| IE | IE9 | IE9 | IE5 والإصدارات الأحدث | |
| Firefox | FF3.5 | FF3.5 | FF3.6 | |
| Chrome | Chrome 4 | الإصدار 0.3 من Chrome | كروم 5 | |
| برنامج المتصفح Safari | 3.1 | 3.1 | ||
| أوبرا | Opera 10.00 | Opera 9 | ||
| iOS | الإصدار 1 من نظام التشغيل iOS | |||
| Android | 2.2 |
بالطبع، لا شيء بسيط كما ينبغي. كان القيد الأولي للرمز أعلاه هو أنه لا يقدم EOT إلى IE 6-8. اقترحت بنية @font-face ضد التعداد النقطي طريقة لحل هذه المشكلة، يتبعها إصدار فعّال.
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.eot'); /* IE 5-8 */
src: local('☺'), /* sneakily trick IE */
url('tagesschrift.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
url('tagesschrift.svg#font') format('svg'); /* iOS */
}
هل يسبب ذلك صداعًا؟ إذا كنت تفضل ذلك بسرعة، يمكنك التوجه إلى منشئ Font Squirrel، وهي أداة تبسط لك العملية بأكملها، حيث تأخذ الخط وتجهز متغيراته وCSS الخاصة به من أجلك. إن تطبيق خطوط الويب موضع التنفيذ اليوم لا غنى عنه.
هل تتوفر خدمة الدعم عبر الأجهزة الجوّالة؟
يتوافق برنامج Mobile Safari مع خطوط الويب بتنسيق SVG اعتبارًا من الإصدار 3.1 من iOS، كما يتوافق نظام التشغيل Android مع otf/ttf اعتبارًا من الإصدار 2.2. ولكن هل يجب أن يحصل مستخدمو الهاتف المحمول على هذه التجربة المطبعية المحسّنة؟ لا أنصحك بالرفض، لأنّ السبب الأساسي هو كيفية تعامل WebKit مع النص الذي ينتظر خطًا مخصّصًا عبر @font-face: النص غير مرئي. ولذلك، في حالة اتصال الهاتف المحمول بمعدل نقل بيانات منخفض، لن يظهر للمستخدمين أي نص على الإطلاق حتى يتم تحميل حوالي 50 ألفًا من بيانات الخط. يسعى فريق Webkit إلى إيجاد حل لتفعيل خط احتياطي بعد انقضاء بضع ثوانٍ، ولكن إلى حين انتهاء ذلك، لن أعتبر أنه من الإنصاف تعريض المستخدمين لمثل هذه العقبات بينهم وبين المحتوى الذي تقدمه.
خدمات خطوط الويب
هناك عدد من الخدمات يلتف حول ميزة @font-face في واجهة برمجة تطبيقات سهلة، وغالبًا ما تتيح لك إضافة CSS واحد أو سطر نص برمجي إلى HTML وبعض الإعدادات ويكون كل شيء قد تم الانتهاء منه. ستتيح لك العديد من هذه الخطوط، مثل WebInk وTypekit وFontslive، استخدام الخطوط (التي تصل أحيانًا إلى الحد الأقصى لمعدل نقل البيانات) مقابل رسوم شهرية. إنّ استخدام هذه الخدمات مناسب للمطوّرين العاديين، ما يجعلهم يتحمّلون بعض تعقيدات تقديم حل يستند إلى متصفّح متوافق مع جميع المتصفّحات.
تتيح لك Google Font API استخدام مجموعة صغيرة ومنظّمة من الخطوط المرخَّصة مجانًا من خلال إضافة رابط إلى ورقة أنماط والسماح لـ Google بمعالجة المخاوف التي تهدد الأداء عبر المتصفحات والأداء. إنها أسرع طريقة للانطلاق في العمل باستخدام خطوط الويب.
العثور على الخطوط الطباعية الاحترافية لـ @font-face
المفاجأة الشائعة للمصممين هي أنه لمجرد حصولك على ترخيص خط (للاستخدام في تصميم الجرافيك، على سبيل المثال)، هذا لا يعني أنه يمكنك استخدامه في @font-face. عادةً ما تُباع تراخيص @font-face (أو تضمين المحتوى على الويب) بشكلٍ منفصل. اقرأ الاتفاقية بعناية، ولا تتردد في الاتصال بمسبك الخط إذا كان لديك أي أسئلة. FontSpring هو متجر للخطوط، يبيع المئات من الخطوط الاحترافية العالية الجودة، وكلّ هذه الخطوط متاحة للاستخدام مع @font-face. وبدأت شركة FontFont ومؤسّسات أخرى في بيع تراخيص @font-face مباشرةً، ولكنّها حاليًا تستهدف WOFF وEOT فقط، ما يترك جزءًا كبيرًا (ولكن يتقلص) من سوق المتصفحات. تضيف العديد من المسابك تراخيص خطوط ويب إلى الكتالوج الخاص بها، ولكن إذا لم تتمكن من العثور على واحدة للخط الطباعي الذي اخترته، تواصَل معها للاستفسار عنها.
كيفية التعامل مع FOUT
يُعدّ Flash of Unstyled Text ظاهرة في Firefox وOpera، ولا يهتم بها سوى عدد قليل من مصممي الويب. عند تطبيق خط طباعي مخصّص عبر @font-face، هناك لحظة قصيرة عند تحميل الصفحة لم يتم فيها تنزيل الخط وتطبيقه بعد، واستخدام الخط التالي في حزمة font-family. يتسبب هذا في وميض بخط مختلف (عادةً أقل جودة) قبل أن تتم ترقيته.
يصاحب واجهة Google Font API أداة WebFont Loader، وهي مكتبة JavaScript تهدف إلى توفير عدد من عناصر الجذب للأحداث التي تمنحك المزيد من التحكّم في التحميل. لنلقِ نظرة على كيفية جعل المتصفحات الأخرى تحاكي سلوك WebKit المتمثل في إخفاء النص الاحتياطي أثناء تحميل الخط @font-face.
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['Tagesschrift'],
urls: ['http://paulirish.com/tagesschrift.css']
}
});
</script>
/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
visibility: visible;
font-family: 'Tagesschrift', 'Georgia', serif;
}
إذا تم إيقاف JavaScript، سيظل النص مرئيًا طوال الوقت، وإذا كانت أخطاء الخط بطريقة ما، فسيعود إلى serif الأساسي بأمان. اعتبر هذا الإجراء كإجراء مؤقت؛ فمعظم خبراء خطوط الويب يريدون إخفاء النص الاحتياطي لمدة 2-5 ثوانٍ، ثم الكشف عنه. خلال هذه المهلة، تستفيد الأجهزة الجوّالة ومعدّلات نقل البيانات المنخفض بشكل كبير. ومن البديهي أنّ Mozilla تتطلّع إلى تصحيح هذا الأمر قريبًا.
وتشكّل السمة font-size-adjust حلاً بسيطًا ولكنّه أقل فعالية، ويتوفّر حاليًا في Firefox فقط. وتتيح لك هذه الطريقة تسوية قيمة x-height في حزمة خطوط، ما يقلّل من مقدار التغيُّر الظاهر في FOUT. في الواقع، أضافت أداة إنشاء سنجاب الخطوط للتو ميزة تخبرك بنسبة الارتفاع x للخطوط التي تحمّلها، لذا يمكنك ضبط قيمة font-size-adjust بدقة.
ملخّص
توفر خطوط الويب قدرًا كبيرًا من الحرية للمصممين، ومع الميزات القادمة مثل الأربطة التقديرية والبدائل الأسلوبية، ستتمتع بمزيد من المرونة. في الوقت الحالي، يمكنك أن تشعر بالثقة عند تنفيذ هذا الجزء من CSS3 لأنه يغطي 98% من المتصفحات المستخدمة. نتمنّى لك وقتًا ممتعًا.