كيفية الطلب

1 تسجيل الدخول أو إنشاء حساب جديد.
2 راجع طلبك أو اطلب خدمة جديدة.
3 تأكيد الدفع

إذا كنت لا تزال تواجه مشكلات ، فالرجاء إخبارنا بذلك عن طريق إرسال بريد إلكتروني إلى support@natchcenter.com . شكراً لك!

ساعات العمل

الإثنين-للجمعة 9:00AM - 20:00PM
السبت - 9:00AM-17:00PM
أيام الأحد عن طريق موعد مسبق فقط!

كل ما تحتاج معرفته عن خاصية فونت فيس

من قبل NatchCenter / ماي 19, 2018 / نشرت في التصميم
كل ما تحتاج معرفته عن خاصية فونت فيس

خطوط الويب 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;

}

 

 

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

نبدأ الخاصية بتصريح @font-face

ثم أسفله نكتب اسم الخط (الذي سنستعمل به الخط لاحقاً) font-family: ‘Droid Arabic Naskh’; نستطيع استعمال أيّ اسم نريده، شرط أن يكون بأحرف لاتنية ولا يبدأ برقم أو بعلامة ترقيم ما.

في السطر الثاني نحدد مسار الخط   src: url(‘droidnaskh-regular.ttf’);

السطران الثالث والرابع غير أساسيان، ولكن سنحتاجهما إذا أردنا أن ندرج أكثر من وزن وتنسيق للخط الواحد، فالسطر الأول هو وزن الخط، و 400 تعني عادي (وكذلك 700 تعني سميك و 300 تعني خفيف)

أخيراً سطر تنسيق الخط font-style: normal; تعني إدراج الخط بدون تنسيقات (نضع italic بدلاً من normal إذا كان الخط المدرج مائل)

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

 

1

2

3

selctor {

font-family: 'Droid Arabic Naskh';

}

 

 

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

 

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

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

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

فمثلا، متصفحات 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 كما أنّه لا يدعم العربية، فلا تستطيع استخدامه هناك.

 

دعم المتصفحات لامتدادات الخطوط، فايرفوكس لا يدعم إمتداد SVG ، أما IE<9 لا يدعم سوى EOT

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

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

تسجيل الدخول إلى حسابك للوصول إلى ميزات مختلفة

او استخدم وسائل التواصل

إنشاء حساب

نسيت معلومات الدخول؟

عرض سعر

سنفعل كل ما في وسعنا لجعل مشروعك أفضل مشروع لدينا!

إشترك معنا في الأخبار

سوف تتلقى إشعارات عن أحدث العروض والعروض الترويجية

لا تظهر هذا مرة أخرى!
TOP