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