تلعب الخطوط دورا مهما في تصميم الويب. إنها تساعد في ضبط الحالة المزاجية ونقل المحتوى الخاص بنا. لذلك ، من المهم معرفة كيفية توصيل الخطوط بشكل صحيح على موقعنا.
المغلق (أوراق الأنماط المتتالية) يسمح لنا للسيطرة على مظهر صفحة ويب. واحدة من العناصر الأساسية من كس هو اختيار الخط. بدلا من الاعتماد على مجموعة محدودة من الخطوط المثبتة مسبقا في المتصفحات ، يمكننا توصيل الخطوط الخاصة بنا.
هناك عدة طرق لتوصيل الخطوط إلى كس. واحدة من أسهل الطرق هي استخدام خطوط الويب. خطوط الويب هي خطوط يتم تنزيلها من خادم بعيد ومتاحة للاستخدام على موقعنا.
في هذه المقالة ، سوف ننظر في تعليمات للمبتدئين حول كيفية توصيل الخطوط باستخدام كس. سوف نتعرف على الطرق المختلفة لتوصيل الخطوط باستخدام @قواعد وجه الخط ونلقي نظرة على أمثلة التعليمات البرمجية لكل طريقة. سننظر أيضا في بعض ميزات ربط الخطوط على مواقع الويب ومشاركة النصائح المفيدة لتحقيق المظهر الأمثل لنصنا.
- ربط الخطوط إلى كس: تعليمات للمبتدئين
- اختيار وتنزيل الخطوط
- ربط الخطوط عبر كس
- أمثلة على استخدام الخطوط في كس
ربط الخطوط إلى كس: تعليمات للمبتدئين
يعد الاختيار الصحيح للخطوط واتصالها في تطوير الويب أمرا مهما للغاية لإنشاء تصميم فريد وجذاب لصفحة الويب. في هذا البرنامج التعليمي ، وسوف ننظر في كيفية توصيل الخطوط باستخدام كس للمبتدئين.
الخطوة 1: حدد الخط. الخطوة الأولى هي اختيار الخط المناسب لصفحة الويب الخاصة بك. هناك العديد من الموارد حيث يمكنك العثور على الخطوط الحرة مثل جوجل الخطوط ، أدوبي الخطوط ، دافونت ، الخ. اختيار الخط الذي يناسب تفضيلاتك وأسلوب المشروع الخاص بك.
الخطوة 2: الحصول على ملفات الخطوط. بعد تحديد الخط ، تحتاج إلى الحصول على ملفات الخطوط بحيث يمكنك توصيلها بصفحة الويب الخاصة بك. عادة ما يتم توفير الخطوط بتنسيقات مختلفة:.محكمة تكافؤ الفرص, .ووف,.2,.صندوق النقد الدولي, .سفغ ، الخ.
الخطوة 3: إنشاء قاعدة @وجه الخط. لتوصيل خط إلى كس ، تحتاج إلى إنشاء قاعدة @ الخط الوجه . هنا مثال على كيفية القيام بذلك:
@الخط الوجه {
عائلة الخط:'اسم مقتصد';
}
استبدل "اسم الخط" باسم الخط ، و "اسم المسار" بالمسار إلى ملف الخط المقابل. تأكد من تحديد مسار الملف بشكل صحيح.
| الخطوة 4: تطبيق الخط على العناصر. بعد إنشاء قاعدة @ الخط والوجه ، يمكنك تطبيق الخط المحدد على العناصر الموجودة على صفحة الويب الخاصة بك. على سبيل المثال ، لتطبيق خط على رؤوس ح1 ، استخدم القاعدة التالية في كس: | |
| ح1 { | الخط الأسرة: 'شيفت_اسم' ، بلا الرقيق; |
| } |
تأكد من تحديد اسم الخط الصحيح الذي استخدمته في قاعدة @وجه الخط. يمكنك أيضا تحديد سمات خط إضافية مثل الحجم والسمنة والنمط وما إلى ذلك.
| الخطوة 5: تحقق من اتصال الخطوط. بعد تطبيق الخط على العناصر ، تحتاج إلى التحقق من توصيل الخطوط بنجاح وعرضها على صفحة الويب. افتح صفحة الويب الخاصة بك في متصفح وتأكد من عرض الخط بشكل صحيح ويلبي توقعاتك. | هذا كل شيء! الآن أنت تعرف كيفية توصيل الخطوط باستخدام كس. لا تنس أن اختيار الخطوط المناسبة يمكن أن يؤثر بشكل كبير على المظهر النهائي لصفحة الويب الخاصة بك ، لذلك يجب الانتباه إلى ذلك واختيار الخطوط ذات الذوق والمناسبة لاحتياجاتك. |
اختيار وتنزيل الخطوط
الخطوة 1:
حدد الخط المناسب لموقعك. يمكنك استخدام الخطوط المجانية من المصادر المفتوحة ، مثل خطوط جوجل ، أو شراء الخطوط التجارية. تأكد من أن الخط الذي تختاره مناسب للمحتوى الخاص بك وعناصر التصميم الأساسية.
الخطوة 2:
قم بتنزيل الخط بالتنسيق المطلوب. الخطوط يمكن أن تكون متاحة في أشكال مختلفة مثل تف ، أوتف ، وف ، وف 2 وغيرها. عادة ما يحتوي الملف الذي تم تنزيله على جميع تنسيقات الخطوط المتاحة.
الخطوة 3:
الخطوة 4:
افتح ملف كس من المشروع الخاص بك وإضافة التعليمات البرمجية التالية:
عائلة الخط:'اسم مقتصد';
الخط الوزن: 400;
الخطوة 5:
ح1 {الآن سوف يستخدم موقعك الخط الذي حددته لرأس ح1.
بعد الانتهاء من هذه الخطوات ، سيكون موقعك جاهزا لاستخدام الخطوط المحددة باستخدام كس. تأكد من عرض موقعك بشكل صحيح في المتصفحات والموارد المختلفة لضمان عرض الخطوط بشكل مناسب للمستخدمين.
ربط الخطوط عبر كس
- غالبا ما يرغب مطورو الويب في إضافة أسلوب وشخصية فريدة إلى موقع الويب الخاص بهم باستخدام خطوط غير قياسية. يمكنك استخدام قواعد كس الخاصة لتوصيل الخطوط.
هناك عدة طرق لتوصيل الخطوط عبر كس.
- ملف هتمل الخاص بك.
الطريقة الثانية هي استخدام الخطوط المحلية على الخادم الخاص بك. في هذه الحالة ، تحتاج إلى توفير ملفات الخطوط بتنسيقات مختلفة (على سبيل المثال،.ووف,.2,.تف) وتحديد المسار إلى هذه الملفات باستخدام قواعد كس.
- لتوصيل الخطوط الخارجية ، تحتاج إلى استخدام القاعدة
@ استيراد
@استيراد رابط ('https://fonts.googleapis.com/css2?family=Roboto&display=swap');