خطوط الويب Web Fonts هي روح الموقع، البعض يعتقد أن تصميم المواقع هو عبارة عن 95% منه “إستخدام جيد للخطوط” والـ 5% الباقية هي للتوزيع الجيد للمحتوى، إختيار الألوان والجرافيكس، الوعي بالطريقة الصحيحة لاستخدام خطوط الويب أصبح أمراً ضرورياً وجزءاً كبيراً من ثقافة مصمم ومطور الويب لا يمكن الاستهانة بها على الاطلاق، احدى طرق استخدام الخطوط في المواقع هو عبر خاصية @font-face والتي ستنتاولها بالتفصيل في السطور القادمة …

الكثير من مصممي ومطوري الويب قد يستخدمون خاصية @font-face بدون دراية كافية لخبايا هذه الخاصية، Google Web Fonts تستعمل هذه الخاصية في خطوطها لندرجها في مواقعنا، وحيث أنّ غوغل توفر علينا الكثير من العناء فهي توفر لنا رابطاً مباشراً نربطه في ملف style.css الخاص بنا، فقد حان الوقت لنتعمق أكثر في هذه الخاصية لكي نستطيع استعمال أيّ خط نريده (ونتوقف عن استعمال خط الكوفي في كل شيء!)

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

مقدمة حول خاصية @font-face

هذه الخاصية ليست جديدة رغم أنها ظهرت مع  CSS3  فقد ظهرت الخاصية مسبقاً في نسخ ie القديمة، ثم تم التخلي عنها للمشاكل التي كانت فيها، وظهرت بحلة جديدة مجدداً في آخر نسخة.

مفهوم هذه الخاصية ببساطة لمن لا يعرفها هو أنّك تستطيع استعمال أي خطّ تريده في الموقع بدلاً من الخطوط الإفتراضية للمتصفحات أو الخطوط الويب الآمنة (والتي أصبحت مملةً جداً)، وهي بسيطة جداً ظاهرياً، فكل ما عليك فعله هو إدراج مسار الخط، وإعطائه اسماً، ثم استخدامه لاحقاً في ملف الCSS الخاص بك.

تكوين الخاصية ودعم المتصفحات

رغم أنّ كتابة كود الخاصية أمر سهل، إلا أنّه أصعب بكثير، سنتطرق الآن للجزء السهل، ونركز لاحقاً على الصعب، يكون الكود كالتالي:-

1
2
3
4
5
6
@font-face  {

font-family: 'Droid Arabic Naskh';

src: url('droidnaskh-regular.ttf');

font-weight: 400;

font-style: normal;

}

لنشرح الكود:-

1. نبدأ الخاصية بتصريح @font-face
2. ثم أسفله نكتب اسم الخط (الذي سنستعمل به الخط لاحقاً) font-family: ‘Droid Arabic Naskh’; نستطيع استعمال أيّ اسم نريده، شرط أن يكون بأحرف لاتنية ولا يبدأ برقم أو بعلامة ترقيم ما.
3. في السطر الثاني نحدد مسار الخط   src: url(‘droidnaskh-regular.ttf’);
4. السطران الثالث والرابع غير أساسيان، ولكن سنحتاجهما إذا أردنا أن ندرج أكثر من وزن وتنسيق للخط الواحد، فالسطر الأول هو وزن الخط، و 400 تعني عادي (وكذلك 700 تعني سميك و 300 تعني خفيف)
5. أخيراً سطر تنسيق الخط font-style: normal; تعني إدراج الخط بدون تنسيقات (نضع italic بدلاً من normal إذا كان الخط المدرج مائل)

بهذه الطريقة، قمنا بتعريف الخط، نأتي الآن إلى طريقة إستعماله، حيث نستخدم الأمر التالي:-

1
2
3
selctor {

font-family: 'Droid Arabic Naskh';

}

الأمر بسيط، والآن إلى دعم المتصفحات، وهو كالتالي

أنواع الخطوط المستعملة

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

فمثلا، متصفحات IE الأقل من 9 تدعم فقط امتداد eot ولا متصفح آخر يدعمها، وأجهزة آبل بنظام IOS 4.1 أو أقل لا تدعم سوى امتداد SVG، لكن فايرفوكس لا يدعم امتداد SVG!

وعليه يمكننا الخروج بإستنتاج واحد وهو أنّ امتداد ttf وحده لا يكفي لندرج الخط بالموقع، إذاً الحل هو إدراج الخط بكل الامتدادات المتاحة (otf – svg – eot – ttf – woff) كل نسخ الخطوط، سنتحدث عن كيفية الحصول على الامتدادات المختلفة للخط الواحد لاحقاً.

أنواع الخطوط هي كالتالي:

• TTF: والتي تعني TrueType font وهي النسخة القياسية المستخدمة في الحواسيب.
• OTF:  والتي تعني OpenType Font وهي من تطوير فريق من adobe و microsoft وهي للحاسوب أيضاً، وقد أتت لتحل بعض مشاكل ttf مثل دعم عدد أكبر من الحروف، لكنها بدورها تعاني من مشاكل أكثر.
• EOT: وتعني Embedded OpenType وهي من تطوير مايكروسوفت، وتستخدم من أجل متصفحها، وتعتبر مضغوطة بشكل ممتاز، فحجمها هو 50% أقل من ttf. والخط أيضا يعالج مشكلة السرقة، فهو يحدد نطاقا واحدا لإستخدام الخط فيه، مما يعني أنّه لا فائدة من سرقة الخط.
• WOFF: والتي تعني Web Open Font Format وهذا الخط أتى خصيصاً للويب، ميزة هذا الخط أنه أصغر حجماً من اخوته فهو أقل بـ40% من ttf، ومخصص للويب، بمعنى أنّه من غير الممكن استخدامه في الحاسوب.
• SVG: وهذا في الواقع ليس خطاً، بل هو تجسيد لكل الحروف على هيئة أشكال svg ما يعيب هذا الخط هو حجمه الكبير جداً، فهو أكبر بـ 400% من ttf، وأكبر بـ 800% من woff كما أنّه لا يدعم العربية، فلا تستطيع استخدامه هناك.

الصياغة الصحيحة لأمر إدراج الخطوط @font-face في ملف CSS

حسنا، سيأتي شخص ما ويقول أنّ علينا أن ندرج كل خط لوحده في عبارته الخاصة، وسيكون محقاً في كلامه، ولكن مخطئاً في نفس الوقت، فبتلك الطريقة، سيُحمل المتصفح كل الخطوط مما يعني ثقلاً على المستخدم، وبطء في تحميل وظهور الصفحة، يمكن حل هذه المشكلة بأن ندرج أكثر من امتداد في عبارة واحدة، لكن هذا لا يكفي بعد، فمجرد جمعهم في عبارة واحدة لا يعني أنّ المشكلة قد تم حلها، فالمتصفح سيحمل كل الخطوط أيضاً! مما سيزيد من حجم الملفات التي يستدعيها المتصفح وهذا يساوي وقتاً أطول في تحميل الصفحة، أمر لا نريده على الاطلاق!

لذا أتى شخص يدعى Ethan – وهو وراء موقع  Font Squirrel – واقترح حلاً فعالاً، وهو وضع نوع الخط بعد مساره، وترتيب الخطوط بطريقة فعالة حتى لا يحمل أيّ متصفح الخط مرتين حقاً

1
2
3
4
5
src: url('../fonts/droidnaskh-regular.eot');

src: url('../fonts/droidnaskh-regular.eot?#iefix') format('embedded-opentype'),

url('../fonts/droidnaskh-regular.woff') format('woff'),

url('../fonts/droidnaskh-regular.ttf') format('truetype'),

url('../fonts/droidnaskh-regular.svg#droid_arabic_naskhregular') format('svg');

كيف سيقرأها المتصفح ؟ لنرى السيناريو التالي عندما نفتح الموقع على متصفح الـ Firefox:-

1. متصفح فايرفوكس سيبدأ من أول سطر سيقرأه ويقول: “أنا لا أدعم ’embedded-opentype’
2. ثم ينتقل للسطر التالي، ويقول: “حسنا أنا أدعم woff لذا سأستخدمه” ثم يتوقف هناك، بمعنى أنّه لن يحمل بقية الخطوط، والأمر سيان لكل متصفح، مع ملاحظة أن الترتيب مهم بكل تأكيد.

كيفية عمل الخاصية

بنظرة أعمق على الخاصية نجد الكود السابق يقوم أولاً بالبحث عن نسخة محلية Local من الخط لها اسم مشابة، فإن لم تجد فتقوم بإستدعاء الخط المطلوب وعرضه، الجميل هنا  أنّه عندما تدرج خطاً ما، ولكن لا تستعمله في التصميم، فإن المتصفح لن يستدعيه.

فمثلاً إذا قمت بإدراج الخط “A”، وأدرجت منه وزنين Bold و Normal- عادي وسميك، ولكنك استعملت في موقعك العادي/Normal فحسب، فإن المتصفح سيستدعي الوزن العادي/Normal  فقط ويترك السميك/Bold، لكي يقلل من المساحة والوقت اللازمين لتحميل كل مكونات الصفحة المطلوبة.

مشاكل المتصفحات

6.1 Google chrome

غوغل كروم يحتوي مشكلة مزعجة قد لا يلاحظها الكثير، وهي تظهر بالتحديد لمستخدمي windows 7 أو أعلى، المشكلة تكمن في أنّ الخطوط تظهر بشكل سيء، وحوافها صلبة جداً …

المشكلة غير موجودة في FireFox، وأيضا في IE بل فقط في كروم، وأيضاً موجودة فقط عندما تستعمل @font-face، السبب في هذه المشكلة هو:

في ويندوز 7 تم إضافة خاصية جديدة، تلك الخاصية تدعى DirectWrite وهي تستعمل لمعالجة الخطوط وإظهارهم بشكل أفضل، فايرفوكس و IE يدعمون هذه الخاصية، مما يعني ظهور الخط لديهم بشكل أفضل، أما كروم، فهو لا يدعمها بعد، بل يستعمل محرك خطوط آخر، طرحت المشكلة منذ أكثر من سنتين في قسم المشاكل لدى كرومينيوم والفريق يعمل على حل المشكلة، وحسب كلام فريق العمل (الذي يعمل في تطوير غوغل كروم) فإنهم يعملون على حل المشكلة، وسيتم طرح الحل قريبا (الأغلب في النسخة القادمة من كروم 34)، تم إصلاح المشكلة في chrome canary والحل سيكون قريباً في المتصفح العادي.

حل هذه المشكلة حاليا ممكن، وهو بإستخدام خط svg (وهو ليس خطاً في الواقع) لكن للأسف، هذا الخط لا يدعم العربية!

لكن هذا لا يمنع إستعمال هذا الحل مع الخطوط اللاتينية وخطوط الأيقونات

ولنستعمل الخط لا يجب أن نزيل كل الخطوط الأخرى ونبقي على svg فحسب، ففي تلك الحالة FireFox لن يظهر الخط، فكما قلنا سابقاً فايرفوكس لا يدعم SVG، ولا ننسى أنّ حجم الخط كبير جداً، 4 أضعاف. ونحن لا نريد أن نثقل على المتصفح بدون فائدة (مثلاً متصفح IE)  لذا علينا أن نستهدف غوغل كروم فحسب وهي بإضافة الكود التالي بعد العبارة الأصلية:-

1
2
3
4
5
6
7
8
@media screen and (-webkit-min-device-pixel-ratio:0) {

@font-face {

font-family: 'Icon Font';

src: url('../fonts/font-name.svg?#font') format('svg');

font-weight: normal;

font-style: normal;

}

}

ما تقوم به عبارة @media هي تنفيذ الكود الذي بداخلها إذا تحقق الشرط، وهي مجرد جملة عشوائية تعمل في كروم فحسب

7.2 Mozilla Firefox

نأتي لصديقنا العزيز FireFox، فبالرغم كونه يعالج الخط بطريقة رائعة ليظهر بشكل جميل، إلا أن فايرفوكس لديه مشكلتان أخريتان:-

1. المشكلة الأولى هي أنّه لا يدعم SVG ونحن الآن لن نناقشها.
2. المشكلة الثانية تظهر عندما تقوم بإستضافة الخط في موقع آخر.

المشكلة الثانية تظهر عندما ترغب في استخدام احدى خدمات الـCDN حيث تضع ملفات الاستايل CSS والصور على سيرفر آخر غير الموجود عليه ملفات الموقع، فلنقل مثلاً أنّك تملك موقع “A” ورابطه هو كالتالي www.site-a.com ولديك موقع آخر وليكن “CDN” رابطه www.CDN.com وأنت تضع الخطوط في ذلك الموقع “CDN” وتريد استخدامها في “A”، في متصفح آخر، سيعمل الأمر بكل سلاسة. وسيظهر الخط الذي ربطته أنت من “CDN إلى “A”، أما في فايرفوكس، فالخط لن يعمل، والسبب هو أنّه لا يسمح بتحميل الخطوط من مصدر خارجي، تدعى هذه المشكلة بـ  (CORS headers) وهي أنّه يمنع استيراد الخطوط الخارجية.

لحل هذه المشكلة يجب التعديل على ملف .htaccess الموجود في الموقع الذي يقدم الخطوط “موقع “CDN” في حالتنا”

1
2
3
<filesmatch ".(ttf|otf|eot|woff)$">



Header set Access-Control-Allow-Origin "*"

يمكن تغيير النجمة الموجود بين علامتيّ اقتباس إلى رابط موقعك لمنع أيّ شخص آخر من استخدام الخطوط.

ويجب أيضاً تغيير شيء آخر وهو مسار الخطوط، فعندما يكون المسار مثلاً:-

1
url('../fonts/font-name.svg?#font')

فالحل لن يعمل هكذا، والأحسن تغييره إلى المسار الكامل المطلق:-

1
url('www.site-b.com/fonts/font-name.svg?#font')

حماية الخطوط

الكثير منا لا يجد خطوط عربية مجانية تناسبه، والبعض الآخر يريد استخدام الخطوط المدفوعة الجميلة في موقعه (مثلي أنا) لكن لا يجد طريقة آمنة لوضعها، لأنّه بما أنّ المستخدم يرى الخطوط أمامه فهذا يعني أنّه يستطيع تحميله، إذا ستكون هناك مشكلة “الحقوق”، حيث أن كل الخطوط المدفوعة لا تسمح لنا بتوزيع الخطوط مما يعتبر قرصنة، هذا الأمر أزعجني لوقت طويل (ومازال يزعجني) ولم أجد للآن حلاً فعالاً لحماية الخطوط، هناك بعض الطرق المتفرقة من بينها مثلاً ربط خط EOT بموقع واحد مما يعني عدم استعماله في مكان آخر. المشكلة في هذا الحل الرائع من مايكروسوفت هو أنّ الامتداد غير مدعوم في أيّ متصفح آخر عدا متصفح IE!

بعض الطرق الأخرى المعقدة مثل التي تستخدمها خدمات توزيع الخطوط المدفوعة (TypeKit) تستخدم عدة طبقات حماية وتظليل للحد من محاولة الوصول إلى الخطوط.

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

في ملف .htaccess الموجود في مجلد الخطوط (إن لم يكن موجوداً، اصنعوا واحدا)

1
2
3
4
5
6
7
</pre>

RewriteEngine On

RewriteCond "%{HTTP_HOST}_%{HTTP_REFERER}" "!\.?([^\.]+\.[^\.]+?)_https?://.*\1/.*$"

RewriteRule \.(woff|eot|ttf)$ - [F,NC,L]

RewriteCond %{HTTP_REFERER} !^$

Options -Indexes

<pre>

سيمنع الكود السابق أيّ شخص من الربط المباشر للخطوط في موقعه، أو حتى تحميلها مباشرة في المتصفح، غيّر domain باسم موقعك و com بامتداده.

تحويل الخطوط

وصلنا للجزء الرائع، عادة خطوط الويب نادرة أو قليلة جداً ولا نجد المناسب منها للويب إلا نادراً، لكن حسب النظرية، أيّ خط حاسوب يمكن استعماله كخط ويب، طبعاً يمكنك مباشرة استخدام امتداد TTF ولكن كما قلنا هناك متصفحات تقف عقبة أمامنا، لذا نستخدم عدداً من الإمتدادات المختلفة للخطوط، فربما نريد إستخدام WOFF فحسب، ولكن لا نعرف كيف نحوله.

font squirrel موقع رائع يقدم خدمة تحويل الخطوط ونشرها وإعطاءها لك بشكل جاهز، ما يعني أنّ ملف الستايل يكون معداً مسبقاً، وما عليك سوى ربطه بموقعك

اختاروا خيار basic لتظهر الخطوط العربية بشكل صحيح

كما أيضاً يمكنك استخدام برنامج FontForge مع أنّه بدا معقداً زيادة لي، لكنه قد يلبي حاجتكم.

في النهاية نستنتج أنّ خاصية font-face@ كانت في الواقع أشبه بصندوق مغلق فنحن كنا ننسخ رابطاً من غوغل ونغير الخط فحسب. الآن نستطيع استخدام هذه الخاصية عن فهم ودراية بكل خباياها وطرق حل مشاكلها.