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