تلعب الخطوط دورا مهما في تصميم الويب ، لأنها تحدد مظهر النص على صفحات الويب. يمكن أن يؤدي تغيير الخط إلى تغيير تصور صفحة الويب تماما ، مما يجعلها أكثر جاذبية وسهولة في القراءة. في هذه المقالة ، سننظر في كيفية تغيير إعدادات الخطوط المختلفة لصفحة الويب.
واحدة من المعلمات الرئيسية للخط هو نوعه. هناك عدد كبير من الخطوط المختلفة ، من الكلاسيكية إلى الحديثة ، من البسيط إلى الزخرفي. كل خط له أسلوبه وشخصيته الخاصة ، ويمكن أن يؤثر اختيار الخط الصحيح بشكل كبير على المظهر العام لصفحة الويب.
معلمة أخرى مهمة للخط هي حجمه. يتم قياس حجم الخط بالنقاط ويحدد حجم النص الذي سيتم عرضه على صفحة الويب. يجعل حجم الخط الأكبر النص أكثر قابلية للقراءة ، ولكنه قد يشغل مساحة أكبر على الصفحة. من ناحية أخرى ، قد يكون حجم الخط الصغير مناسبا لعرض كمية كبيرة من النص ، ولكن قد يكون قراءته أكثر صعوبة.
- إعدادات الخط الأساسية
- تغيير حجم الخط
- اختيار الخط
- لون النص والأسلوب
إعدادات الخط الأساسية
عند تكوين الخطوط على صفحة ويب ، يمكنك استخدام الإعدادات الأساسية التالية:
- عائلة الخط: يحدد اسم الخط الذي سيتم عرضه على صفحة الويب. يمكنك اختيار واحد من الخطوط على شبكة الإنترنت المتاحة ، مثل أريال ، تايمز نيو رومان ، فيردانا ، أو تحديد اسم الخط المثبت على جهاز الكمبيوتر الخاص بك مباشرة.
- حجم الخط: يحدد حجم الخط. يمكنك تحديد الحجم بالبكسل (بكسل) أو النسب المئوية ( ٪ ) أو النقاط (نقطة) أو وحدات القياس الأخرى.
- وزن الخط: يشير إلى محتوى الدهون في الخط. يمكنك استخدام القيم من 100 إلى 900 ، حيث يشير 400 إلى خط عادي و 700 يشير إلى غامق.
- نمط الخط: يحدد نمط الخط. تشير القيمة " مائل "إلى أن الخط يجب أن يكون مائلا ، وتشير القيمة" عادي " إلى خط عادي.
- زخرفة النص: يتم تطبيقه على النص لإضافة عناصر زخرفية مثل التسطير أو يتوسطه خط أو يتوسطه خط.
- تحويل النص: يستخدم لتغيير حالة النص. ستؤدي القيمة "الأحرف الكبيرة" إلى تحويل النص بالكامل إلى أحرف كبيرة ، و "أحرف صغيرة" إلى أحرف صغيرة ، وستجعل "الأحرف الكبيرة" كل حرف من أحرف الكلمة الكبيرة.
- ارتفاع الخط: يحدد ارتفاع سطر النص. يمكنك تحديد القيمة بالبكسل (بكسل) أو النسب المئوية ( ٪ ) أو وحدات القياس الأخرى. تحدد القيمة "عادي" ارتفاع الخط القياسي.
- تباعد الحروف: يحدد التباعد بين أحرف النص. يمكنك تحديد القيمة بالبكسل (بكسل) أو النسب المئوية ( ٪ ) أو وحدات القياس الأخرى.
باستخدام هذه الخيارات ، يمكنك تخصيص الخطوط على صفحة الويب بحيث تلبي متطلباتك وتفضيلاتك.
تغيير حجم الخط
يمكن تغيير حجم الخط على صفحة ويب باستخدام المغلق. للقيام بذلك ، يمكنك استخدام وحدات القياس المطلقة أو النسبية.
وحدات القياس المطلقة ، مثل" بكسل "أو" نقاط " ، تعيين حجم الخط من قبل عدد معين. على سبيل المثال ، لتعيين حجم خط 14 بكسل ، يمكنك استخدام رمز كس التالي:
ص {
حجم الخط: 14 بكسل;
}
وحدات القياس النسبية ، مثل "النسب المئوية" أو "م" ، تعيين حجم الخط بالنسبة لحجم الأصل أو العنصر الحالي. على سبيل المثال ، لتعيين حجم خط إلى 150 ٪ نسبة إلى حجم الأصل ، يمكنك استخدام التعليمات البرمجية كس التالية:
ص {
حجم الخط: 150%;
}
يمكنك أيضا استخدام كلمات رئيسية مثل" صغير "أو" قياسي "أو" كبير " لتعيين حجم الخط النسبي. على سبيل المثال ، لتعيين حجم الخط إلى "صغير" ، يمكنك استخدام رمز كس التالي:
ص {
حجم الخط: صغير;
}
يتيح لك تغيير حجم الخط تحقيق تأثيرات مختلفة والتركيز على عناصر معينة من صفحة الويب. من المهم أن تضع في اعتبارك إمكانية الوصول إلى النص وقابليته للقراءة للمستخدمين ، لذلك يجب أن يكون اختيار حجم الخط معقولا ومتناسبا مع المحتوى.
اختيار الخط
1. خطوط النظام
بعض الخطوط ، تسمى خطوط النظام ، مثبتة بالفعل على كمبيوتر المستخدم. يعد استخدام خطوط النظام ممارسة جيدة ، لأنها متوفرة على نطاق واسع وعادة ما تكون قابلة للقراءة جيدا.
2. خطوط الويب
خطوط الويب هي الخطوط التي يتم تنزيلها من الخادم عند تحميل صفحة ويب. ميزتها الرئيسية هي القدرة على استخدام خطوط غير عادية وغير قياسية. ومع ذلك ، عند استخدام خطوط الويب ، يجب أن تكون حذرا عند تحميلها حتى لا تبطئ سرعة تحميل الصفحة.
3. تجميع الخط
لتحقيق تأثير مرئي متناغم ، يمكنك استخدام مزيج من الخطوط المختلفة. على سبيل المثال ، يمكنك استخدام خط واحد للعناوين وآخر للنص الرئيسي. ومع ذلك ، من الضروري الانتباه إلى توافق الخطوط المحددة وقابليتها للقراءة.
4. حجم الخط
من المهم أيضا اختيار حجم الخط الأمثل. قد يكون من الصعب قراءة الخط الصغير جدا ، وقد يكون كبيرا جدا غير مريح للقراءة. غالبا ما توصي مشاريع تصميم الويب باستخدام حجم خط 16 بكسل أو أكثر للنص الرئيسي.
سيساعدك تطبيق هذه التوصيات على اختيار الخط المناسب وجعل صفحة الويب الخاصة بك أكثر قابلية للقراءة وجاذبية للزوار.
لون النص والأسلوب
. تتيح لك هذه الخاصية تعيين لون النص بطرق مختلفة ، بما في ذلك استخدام اسم اللون أو الرمز السداسي العشري الخاص به. على سبيل المثال:
- - يحدد اللون الأحمر للنص
- - يحدد اللون الأزرق للنص
. تتيح لك هذه الخاصية تعيين إحدى القيم التالية:
- - نمط النص الافتراضي
- - نمط النص المائل
- - نمط النص المائل
. تسمح لك هذه الخاصية بتعيين حجم النص بالبكسل (بكسل) أو وحدات القياس الأخرى. على سبيل المثال:
- - يحدد حجم النص إلى 12 بكسل
- - تعيين حجم النص إلى 1.2 أضعاف حجم الخط الافتراضي
من المهم أن نفهم أنه يمكن دمج هذه الخصائص لتحقيق النوع المطلوب من النص. على سبيل المثال ، لتعيين اللون الأحمر والنمط المائل وحجم النص إلى 18 بكسل ، يمكنك استخدام التعليمات البرمجية التالية:
اللون: أحمر;
نمط الخط: مائل;
حجم الخط: 18 بكسل;
هذه ليست سوى بعض من إمكانيات نص التصميم على صفحة ويب باستخدام كس. بعد التعرف على الخصائص الإضافية ودمجها معا ، يمكنك إنشاء تأثيرات بصرية ممتعة وجميلة.