يعد اختيار الخط الصحيح جانبا مهما من تصميم الويب. خط أكثر عمقا وفريدة من نوعها يمكن أن تعطي موقع الويب الخاص بك نظرة جديدة وتعيين الزوار بطريقة خاصة.
إذا كانت متطلباتك لا تفي بالخطوط المتاحة ، يمكنك إضافة الخط الخاص بك إلى الموقع. لحسن الحظ ، في معايير تطوير الويب ، فمن الممكن استخدام ملفات الخط في شكل أوبن (أوتف). وفي هذه المقالة ، سوف ننظر في كيفية إضافة خط أوتف إلى موقع الويب الخاص بك.
أولا وقبل كل شيء ، تحتاج إلى الحصول على ملفات الخط في شكل أوتف. يمكنك العثور عليها على موارد مختلفة مثل خطوط جوجل أو في المجموعات التجارية. بعد تحميل الخطوط ، يجب فك ضغط الأرشيف والعثور على ملفات أوتف لكل نوع الخط الذي تريد استخدامه.
من المهم ملاحظة أن الخطوط تخضع لحقوق الطبع والنشر وقد يتم تقييد استخدامها. تحقق من ترخيص الخط وتأكد من أن لديك إذنا لاستخدامه على موقعك قبل البدء في إضافته.
بمجرد حصولك على ملفات الخطوط ، يمكنك إضافتها إلى موقعك. ضع ملفات الخطوط في مجلد المشروع ، على سبيل المثال "الخطوط". ثم ، تحتاج إلى تحديد المسار إلى ملف الخط داخل ملف كس الخاص بك باستخدام مسار الملف الصحيح.
- استيراد وتثبيت الخط أوتف
- توصيل الخط إلى الموقع
- استخدام الخط على الموقع
- التحقق من وظيفة الخط
استيراد وتثبيت الخط أوتف
لإضافة خط أوتف إلى موقع الويب الخاص بك ، تحتاج إلى اتباع عدة خطوات:
- العثور على الخط أوتف الصحيح لموقعك. الخطوط أوتف هي الخطوط ناقلات ويمكن أن تحتوي على المزيد من المعلومات الشخصية من خطوط تروتايب (تف).
- تحميل الخط أوتف المحدد إلى جهاز الكمبيوتر الخاص بك.
- قم بإنشاء مجلد باسم" الخطوط " على الخادم الخاص بك ، إذا كان هذا المجلد غير موجود بالفعل.
- انسخ خط أوتف الذي تم تنزيله إلى مجلد الخطوط الذي تم إنشاؤه.
- افتح ملف كس المستخدم على موقعك باستخدام أي محرر نصوص.
- في ملف كس ، إنشاء نمط جديد للخط أوتف. على سبيل المثال ، يمكنك استخدام التعليمات البرمجية التالية:
@الخط الوجه {
- عائلة الخط:'اسم مقتصد';
سرك: ورل('/الخطوط/الخط_الاسم.أوتف') شكل ('أوبن');}
في هذه الحالة ، استبدل "اسم الخط" باسم الخط و "اسم الخط".أوتف " إلى اسم الملف من الخط أوتف الخاص بك.
قم بتطبيق النمط الذي تم إنشاؤه على العناصر الضرورية على موقعك عن طريق تحديد خاصية "عائلة الخط" في كس باسم الخط الخاص بك. على سبيل المثال:
- ح1 {
- الخط الأسرة: 'شيفت_اسم' ، بلا الرقيق;
- }
في هذا المثال ، استبدل "اسم الخط" باسم الخط الخاص بك.
بعد الانتهاء من كل هذه الخطوات ، يجب أن يستخدم موقعك خط أوتف المضاف.
توصيل الخط إلى موقع على شبكة الانترنت
من أجل إضافة خط .أوتف إلى موقع الويب الخاص بك ، اتبع الخطوات التالية:
قم بتنزيل ملفات الخطوط.أوتف وحفظها على جهاز الكمبيوتر الخاص بك.
قم بإنشاء مجلد باسم" الخطوط " (أو أي اسم آخر مناسب لك) في الدليل الجذر لموقعك.
انقل ملفات الخطوط.أوتف إلى مجلد "الخطوط" التي تم إنشاؤها.
فتح ملف نمط موقعك, عادة ملف مع .تمديد المغلق.
أضف الكود التالي إلى قسم الأنماط:
سرك: ورل("الخطوط/الخط_الاسم.أوتف") شكل ("أوبن");}
لتطبيق خط على عنصر معين في الصفحة ، استخدم خاصية "عائلة الخط" وقم بتعيين القيمة المساوية لاسم الخط الذي حددته في الكود أعلاه.
على سبيل المثال:
}
الآن سيتم عرض عناوين المستوى الأول () على موقعك بالخط الذي تختاره.
استخدام الخط على الموقع
بعد إضافة الخط بنجاح.أوتف إلى موقع الويب الخاص بك ، يمكنك تطبيقه على عناصر النص. للقيام بذلك ، سوف تحتاج إلى استخدام قاعدة كس @الخط الوجه.
بادئ ذي بدء ، لتطبيق خط على عنصر معين ، على سبيل المثال ، على رأس ، استخدم محدد الرأس وقم بتعيين خاصية عائلة الخط باسم الخط:
ح1 {