الخطوط المخصصة هي من بين الجوانب الأكثر جاذبية ل CSS3 للمصممين. باستخدام قاعدة font-face ، يمكنك عرض أي خط لديك على الإنترنت داخل نص صفحة الويب الخاصة بك ، بغض النظر عما إذا كان المستخدم قد قام بتثبيته أم لا.
كما هو الحال مع معظم تقنيات CSS3 ، فإن الرمز الأساسي بسيط للغاية ، لكن الواقع العملي أكثر تعقيدًا بعض الشيء.
في هذا البرنامج التعليمي القصير ، سنعرض أساسيات تضمين الخطوط المخصصة في صفحاتك.
أولاً ، تأكد من أن الخط الذي تريد استخدامه مرخص لاستخدام الويب. يمكن استخدام جميع الخطوط المجانية تقريبًا على موقع الويب وتتوفر العديد من الخطوط المميزة مع ترخيص يغطي استخدام الويب.
المقبل تحميل الخط الذي اخترته على الخادم الخاص بك. قد ترغب في تخزينها في دليل "خطوط" مخصص ولكن هذا اختياري.
تذكر تضمين الملفات لأي أنواع مختلفة من الخط الذي تخطط لاستخدامه ، مثل غامق أو مائل. يمكنك استخدام ملفات EOT (Embedded OpenType) لـ Internet Explorer و OTF (OpenType) أو TTF (تروتايب) للباقي. (تتضمن الخيارات الإضافية WOFF (تنسيق خط Open Web) و SVG (Scalable Vector Graphics) ولكن سنلتزم بأنواع أكثر شيوعًا هنا.)
قم بتدوين مكان تخزين ملفات الخطوط على الخادم الخاص بك.
افتح ملف HTML أو CSS للصفحة التي تعمل بها. إضافة تعريف خط - وجه إلى رمز النمط:
@font-face {}أولاً داخل قسم وجه الخط ، أعط الخط اسمًا يمكنك استخدامه لاحقًا للإشارة إليه:
font-family: 'lovelyFont';بعد ذلك ، ما زال داخل قسم الخطوط ، قم بتوفير موقع ملف EOT:
src: url('fonts/lovely_font.eot');تغيير موقع واسم الخط حسب الضرورة. التالي إضافة خط OTF و / أو TTF:
src:url('fonts/lovely_font.otf')src:url('fonts/lovely_font.ttf') هذه هي العظام المكشوفة للرمز الضروري ، والتي ستكون كافية في كثير من الحالات. ومع ذلك ، هناك خطوات إضافية يمكننا اتخاذها لجعل الشفرة أكثر موثوقية. قم أولاً بتمديد هذا القسم لتضمين مؤشر لنوع ملف الخط:
src:url('fonts/lovely_font.otf')format('opentype');src:url('fonts/lovely_font.ttf')format('truetype');وكإجراء آخر اختياري للكفاءة ، يمكننا الحصول على المتصفح للبحث عن نسخة محلية من الخط في حالة وجود المستخدم بالفعل. قم بتوسيع التعليمة البرمجية الخاصة بك مرة أخرى كما يلي ، مع إضافة القسم المحلي قبل تحديد عنوان URL ، بحيث يتم تنزيل الخط فقط إذا لزم الأمر:
src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.ttf')format('truetype');الإضافة هي نفسها لكل من OTF و TTF. نحدد اسم الخط بعد الكلمة الرئيسية المحلية .
في هذه الحالة ، لدينا سطرين يحددان الخط المحلي لأن اسم الخط يحتوي على أكثر من كلمة واحدة فيه. يلبي الإصدار الموحد طريقة تخزين أسماء الخطوط على أنظمة تشغيل معينة - وهذا الخط الإضافي غير ضروري إذا كان الخط يحتوي على كلمة واحدة فقط في اسمه. إذا كنت تعرف أن الخط يمكن أن يكون له أسماء مختلفة على أنظمة مختلفة ، فعليك تضمين كل الاحتمالات في القسم المحلي .
أخيرا يمكننا تطبيق الخط على عناصر الصفحة. في رمز CSS لعنصر معين ، أو مجموعة من العناصر ، ما عليك سوى تحديد اسم الخط الذي استخدمته ، بما في ذلك أي مواطن خاطئ اخترتها:
div { font-family: 'lovelyFont', sans-serif; }إذا أردت ، على سبيل المثال ، استخدام إصدار غامق من الخط الخاص بك أيضًا ، فقم ببساطة بتضمين قسم آخر لخط وجه باستخدام عنوان URL لملف الخط الغامق وإعلان "font-weight: bold؛". حدد خطًا بخط أسود عريض لأي عنصر مع تطبيق الخط المخصص عليه وسيقوم المتصفح تلقائيًا بعرض الإصدار الغامق:
/*default version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font.eot');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');}/*bold version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font_bold.eot');src:local('Lovely Font Bold'),local('Lovely-Font-Bold'),url('fonts/lovely_font_bold.otf')format('opentype');font-weight: bold;}/*container element*/div { font-family: 'lovelyFont', sans-serif; }/*span elements inside the container div*/span { font-weight: bold; }هذا هو!
هل تستخدم CSS3 لتوسيع وجوه الكتابة المتاحة لك؟ هل تستخدم خدمة مثل Adobe's Typekit أو Google Webfonts؟ اسمحوا لنا أن نعرف في التعليقات.