🛠استخدام خطوط مُخَصَّصَة مع @ font-face
يبدو من العنوان أن أمراً غريباً قد يصنعه CSS ، وهو كذلك !
في بعض المواقع مثل jabism.com ستجد نفسك تقرأ المقالات بخطوط غير مثبتة على حاسوبك 🖥
قبل سنوات لم يكن مُمْكناً أن تتصفح موقعاً بشكل مريح إذا لم تكن منشوراته مكتوبة بخط مثبت سلفاً على حاسوبك ، ولكن اليوم مع CSS3 أصبح بإمكانك استخدام أي خط تريد على موقعك، و هذا يعمل جيداً مع معظم المتصفحات و عند جل الزوار و المبحرين على النت 🎯.
في حقيقة الأمر ، عندما تبحث عن الخطوط لتختار منها ما يروقك لتحرير مقالاتك بالموقع، فإنك تجدها محدودة للغاية!
و لكن هل من سبيل لاستخدام الخط الذي أفضله على موقعي؟
كما قلنا للتو أنه اصبح ممكناً استعمال الخط الذي يروقك
لكن كن على حذر! قد تكون الخطوط جميلة، لكن كيف تتمكن منها و ما هي الطرق للوصوص إليها؟
سيكون من الضروري أن يقوم متصفح زوارك بتنزيل ملف الخط تلقائيًا ، و الذي يمكن أن يصل وزنه إلى 1 ميغابايت أو حتى أكثر …
تخضع معظم الخطوط لحقوق الطبع والنشر ، لذلك ليس من القانوني استخدامها على موقعك. لحسن الحظ ، هناك مواقع مثل fontsquirrel.com تقدم بلا مقابل تنزيل عدد من الخطوط .
إن موقع fontsquirrel.com يسمح لك بتنزيل حزم جاهزة للاستخدام لـ CSS 3.
هناك العديد من تنسيقات ملفات الخطوط و لكنها لا تعمل على جميع المتصفحات.
فيما يلي تنسيقات ملفات الخطوط المختلفة والتي تحتاج إلى معرفتها:
ttf: هذا الخط يعمل على IE9 وجميع المتصفحات الأخرى.
eot: هذا الخط يعمل على جميع إصدارات Internet Explorer فقط، (التنسيق مملوك ل Microsoft.)
.otf: هذا الخط لا يعمل على انترنت اكسبلورر.
svg: هذا التنسيق الوحيد المعترف به على أجهزة iPhone و iPad في الوقت الحالي.
.woff: هذا الخط يعمل على IE9 وجميع المتصفحات الأخرى.
في CSS ، لتحديد خط جديد ( مثلاً JaBismFont ) ، يجب أن تبين أنه مثل هذا:
|
1 2 3 4 |
@font-face { font-family: 'JaBismFont'; src: url('JaBismFont.ttf'); } |
يجب أن يكون ملف الخطوط JaBismFont.ttf موجودًا في نفس المجلد الذي يضم ملف CSS (أو في مجلد فرعي ، إذا كنت تستخدم مسارًا نسبيًا).
أعتقد أن هناك العديد من تنسيقات الخطوط؟
إعلم أن المتصفح سيقوم بتنزيل التنسيق الذي يمكنه قراءته. و إليك كيفية تحديد تنسيقات متعددة:
|
1 2 3 4 5 6 7 |
@font-face { font-family: 'JaBismFont'; src: url('JaBismFont.eot') format('eot'), url('JaBismFont.woff') format('woff'), url('JaBismFont.ttf') format('truetype'), url('JaBismFont.svg') format('svg'); } |
– بينما كنت أبحث عن بعض الاضافات في الموضوع على النت، وجدت مقالة بها شروحات توفي بالغرض فأحببت أن أضع رابطها هنا من أجل الفائدة :
https://wiki.hsoub.com/CSS/@font-face
<
p style=”direction: rtl;”> الرجوع لقائمة المزيد من تنسيقات النصوص