يعد تصميم النص جزءا مهما من إنشاء مواقع ويب جذابة وفريدة من نوعها. تتمثل إحدى طرق جعل النص مميزا في استخدام الخطوط غير القياسية. ومع ذلك ، من أجل استخدام هذه الخطوط ، يجب أن تكون متصلا بشكل صحيح إلى صفحة ويب باستخدام كس. في هذا الدليل خطوة بخطوة ، سنخبرك بكيفية القيام بذلك.
أولا ، لاستخدام خط غير قياسي ، تحتاج إلى العثور على ملفات الخطوط وتنزيلها. عادة ، يتم توفير الخطوط غير القياسية في صيغ تروتايب أو أوبن. عندما تقوم بتنزيل ملفات الخطوط ، احفظها في مجلد منفصل على الخادم الخاص بك.
بعد ذلك ، تحتاج إلى توصيل ملفات الخط إلى رمز كس الخاص بك. للقيام بذلك ، إضافة التعليمات البرمجية التالية إلى ملف كس الخاص بك:
في هذا الرمز ، يجب استبدال 'اسم الخط' مع اسم الخط الخاص بك و ' ملف المسار.'الاتجاه' هو المسار إلى ملف الخط على الخادم الخاص بك. يمكنك أيضا تحديد العديد من تنسيقات ملفات الخطوط المختلفة بحيث يتم عرض النص بشكل صحيح على أجهزة ومتصفحات مختلفة.
بعد توصيل خط مخصص بملف كس الخاص بك ، يمكنك استخدامه عن طريق تعيين اسمه لخاصية عائلة الخط في رمز كس الخاص بك. على سبيل المثال:
ح2 {
الخط الأسرة: 'اسم الخط' ، بلا الرقيق;
}
الآن سيتم عرض النص الخاص بك باستخدام الخط غير القياسي المحدد. لا تنس أنه قد يتم تحميل الخطوط غير القياسية بتأخير ، لذلك من الأفضل استخدام خطوط النظام كبديل قبل تنزيل خط غير قياسي.
- توصيل خط كس مخصص
- اختيار الخط والتحميل
- إنشاء دليل للخطوط
- إضافة خط إلى ملف كس
توصيل خط كس مخصص
من أجل استخدام خط غير قياسي على صفحة ويب ، تحتاج إلى اتباع عدة خطوات.
الخطوة 1: قم بتحميل ملف الخط إلى الخادم.
يمكنك تحميل ملف الخط الخاص بك إلى الخادم باستخدام عميل بروتوكول نقل الملفات أو أي أداة أخرى مماثلة.
الخطوة 2: حدد المسار إلى ملف الخط في رمز كس.
افتح ملف نمط كس الذي تستخدمه على صفحة الويب وأضف السطر التالي من التعليمات البرمجية:
@الخط الوجه {
عائلة الخط:'اسم مقتصد';
<url>: <url>;
}
الخطوة 3: تطبيق الخط في خصائص كس.
لاستخدام خط غير قياسي لعنصر هتمل ، ببساطة إضافة السطر التالي من التعليمات البرمجية إلى قواعد كس:
الخط الأسرة: 'شيفت_اسم' ، بلا الرقيق;
الآن سيتم تطبيق الخط المخصص على العناصر المحددة على صفحة الويب الخاصة بك.
اختيار الخط والتحميل
عند اختيار خط لاستخدامه على صفحة ويب ، من الضروري مراعاة إمكانية الوصول إليه وسهولة القراءة والتوافق مع الأجهزة والمتصفحات المختلفة.
عند تحديد خط مناسب ، يمكنك تحميله على موقع الويب الخاص بك باستخدام خدمات الخطوط أو تنزيله بنفسك.
توفر خدمات الخطوط مثل خطوط جوجل أو خطوط أدوبي مجموعة واسعة من الخطوط التي يمكن توصيلها بموقعك على الويب ببساطة عن طريق إضافة الرمز المناسب إلى صفحتك.
إذا قمت بتنزيل الخط بنفسك ، فأنت بحاجة إلى التأكد من أن لديك حقوق استخدام هذا الخط. تحميل ملفات الخط إلى الخادم الخاص بك وتحديد المسار لهم في رمز كس الخاص بك.
.
هنا مثال على رمز كس لتحميل الخط:
| رمز المغلق | الوصف |
|---|---|
| تحديد الخط ومسار الملف الخاص به | |
| تطبيق الخط الذي تم تنزيله على عنصر |
لا تنس تحديد خط بديل أو عائلة خطوط لعرض أكثر موثوقية للنص الخاص بك ، في حالة عدم توفر الخط الذي تم تنزيله أو عدم دعمه.
إنشاء دليل للخطوط
لتوصيل خط غير قياسي إلى كس ، تحتاج إلى إنشاء دليل حيث سيتم تخزين ملفات الخط. يمكن تسمية هذا الكتالوج بشكل تعسفي ، على سبيل المثال ، "الخطوط".
خطوات إنشاء دليل للخطوط:
- قم بإنشاء مجلد جديد في مشروعك وقم بتسميته "الخطوط" أو اسم آخر مناسب لك.
- أضف ملفات مع الامتداد داخل المجلد الذي تم إنشاؤه.ووف,.2,.الصناديق أو ملحقات أخرى ، اعتمادا على أنواع الخطوط التي تريد استخدامها. يرجى ملاحظة أن المتصفحات المختلفة تدعم تنسيقات خطوط مختلفة ، لذلك يوصى بإضافة عدة ملفات من أنواع مختلفة لضمان أقصى قدر من التوافق.
- أعط أسماء للملفات المقابلة لاسم الخط أو الغرض منها (على سبيل المثال ، "أوبنسان".ووف " ، " أوبن سانسبولد.ووف 2 " ، الخ.) بحيث يكون من الأسهل للتنقل لهم عند الاتصال المغلق.
- ضع ملفات الخطوط في الدليل الذي تم إنشاؤه.
بعد إنشاء دليل مع الخطوط ، سوف تكون على استعداد لتضمينها في ملف كس الخاص بك باستخدام قاعدة @الخط الوجه.
إضافة خط إلى ملف كس
لإضافة خط مخصص إلى ملف كس ، اتبع الخطوات التالية:
- قم بتنزيل الخط الذي تريد استخدامه وحفظه في المجلد مع مشروعك.
- .
- url('путь к шрифту.woff2') format('woff2'),
- url('путь к шрифту.woff') format('woff'),
font-weight: normal;
font-style: normal;