تغيير أحجام الخطوط في كس: دليل المبتدئين

تلعب أحجام الخطوط دورا مهما في إنشاء تصميم صفحة ويب فعال وجذاب. إنها تساعد في ضبط الحالة المزاجية وتحسين سهولة قراءة المحتوى. هناك عدة طرق لتغيير حجم الخط في كس ، وفي هذا الدليل سوف ننظر في الطرق الأساسية للمبتدئين.

الطريقة الأولى والأسهل لتعيين حجم الخط هي استخدام وحدات القياس المطلقة مثل النقاط (نقطة) أو وحدات البكسل (بكسل). على سبيل المثال ، لتعيين حجم خط 12 نقطة ، يمكنك استخدام التعليمات البرمجية التالية:

حجم الخط: 12 نقطة;

ومع ذلك ، يمكن أن يؤدي استخدام الوحدات المطلقة إلى حدوث مشكلات عند عرض صفحة ويب على أجهزة ذات شاشات ودقة مختلفة. لتحقيق تصميم أكثر تكيفا ومرونة ، يوصى باستخدام وحدات القياس النسبية.

الطريقة الثانية هي استخدام وحدات القياس النسبية مثل النسب المئوية ( ٪ ) أو إم أو ريم. على سبيل المثال ، لزيادة الخط بنسبة 20 ٪ بالنسبة إلى الحجم الأساسي ، قم بتعيين:

حجم الخط: 120%;

تسمح لك الوحدات النسبية بإنشاء تصميم أكثر مرونة واستجابة من شأنه أن يتوسع بشكل أفضل على الأجهزة والشاشات المختلفة بدقة مختلفة.

1. لماذا أحتاج إلى تغيير أحجام الخطوط في كس
2. الطرق الرئيسية لتغيير أحجام الخطوط
3. استخدام القيم المطلقة
4. استخدام القيم النسبية
5. تطبيق أحجام الخطوط على عناصر مختلفة
6. تغيير حجم الخط للعناوين

لماذا أحتاج إلى تغيير أحجام الخطوط في كس

باستخدام كس لتغيير حجم الخطوط ، يمكنك التحكم في ارتفاع وعرض الخط والهوامش والمسافة بين الأحرف. يتيح لك ذلك إنشاء تصميم متناغم حيث تتم قراءة النص بسهولة وراحة.

أيضا ، تغيير أحجام الخطوط في كس يسمح لك لخلق لهجة وتأثيرات التسلسل الهرمي البصرية ، وتسليط الضوء على المعلومات الهامة ، أو إنشاء نمط خاص للعناوين والعناوين الفرعية ، وعناصر النص الأخرى. هذا يساعد على تنظيم المعلومات على الصفحة وجعلها أكثر قابلية للفهم للقارئ.

وبالإضافة إلى ذلك ، تغيير أحجام الخطوط في كس يسمح لك لخلق تصميم التكيف التي تتكيف مع الأجهزة والشاشات المختلفة. يمكنك تحسين أحجام الخطوط لجعل النص يبدو جيدا على كل من شاشات الكمبيوتر الكبيرة والأجهزة المحمولة منخفضة الدقة.

بشكل عام ، يمنحك تغيير حجم الخطوط في كس مزيدا من المرونة في إنشاء تصميم ويساعد على جعل محتوى موقعك أكثر سهولة ومتعة للمستخدمين.

الطرق الرئيسية لتغيير أحجام الخطوط

1. الأحجام المطلقة: هناك العديد من الوحدات المطلقة المتاحة في كس لتحديد أحجام الخطوط. على سبيل المثال ، بكسل (بكسل) ، نقاط (بت) ، بوصة (في) ، ملليمتر (مم) ، الخ. يضمن تعيين حجم الخط باستخدام الوحدات المطلقة قيمة حجم دقيقة ولا يعتمد على إعدادات المستخدم. ومع ذلك ، يمكن أن يؤدي ذلك إلى مشاكل في إمكانية الوصول إلى الصفحة وتحجيمها.
2. الأبعاد النسبية: بدلا من استخدام الوحدات المطلقة ، يوصى غالبا باستخدام الوحدات النسبية لتحديد أحجام الخطوط في كس. بعض الوحدات النسبية الأكثر شيوعا هي النسب المئوية ( ٪ ) ، إم و ريم. وتستند النسب المئوية و إم على العنصر الأصل ، في حين يستند ريم على حجم الخط من العنصر الجذر (عادة). توفر أحجام الخطوط النسبية تخطيطا أكثر مرونة وتكيفا ، مما يسمح للمستخدمين بتوسيع نطاق الصفحة دون فقدان الجودة.
3. استخدام الكلمات الرئيسية: يوفر كس أيضا العديد من الكلمات الرئيسية لتحديد أحجام الخطوط. على سبيل المثال ، يمكنك استخدام القيم الأصغر أو الأكبر لتقليل أو زيادة حجم الخط بالنسبة إلى حجمه الحالي. يمكن أن تكون الكلمات الرئيسية مفيدة عندما تحتاج إلى تغيير حجم الخط بسرعة دون الحاجة إلى تحديد قيمة رقمية معينة.
4. استعلامات الوسائط: تتيح لك استعلامات الوسائط تطبيق أنماط مختلفة اعتمادا على دقة الشاشة أو ميزات الوسائط الأخرى. هذا مفيد عند تطوير تصميم سريع الاستجابة وقد يتضمن تغيير حجم الخطوط في كس لأجهزة وشاشات مختلفة.
5. استخدام قاعدة بيانات واحدة: يفضل بعض المطورين استخدام وحدات نسبية وموحدة لأحجام الخطوط. على سبيل المثال ، يمكنك تعيين حجم الخط الأساسي على عنصر باستخدام وحدة ريم النسبية ، ثم استخدام وحدات نسبية أو مطلقة إضافية لتوسيع نطاق العناصر الأخرى.

يعد تغيير حجم الخطوط في كس جانبا مهما من تصميم صفحة الويب. يمتلك المطورون مجموعة واسعة من الطرق لإدارة أحجام الخطوط ، ويعتمد اختيار طريقة معينة على التصميم المحدد ومتطلبات المشروع. تجربة واختيار الطريقة الأنسب لاحتياجاتك.

استخدام القيم المطلقة

عندما نتحدث عن استخدام القيم المطلقة لتغيير أحجام الخطوط في كس ، فإننا نعني تحديد قيمة رقمية محددة. عادة ما يتم تحديد هذه القيم بالبكسل (بكسل).

على سبيل المثال ، لتعيين حجم خط 14 بكسل ، يمكننا استخدام قاعدة كس التالية:

حجم الخط: 14 بكسل;

}

في هذه الحالة ، تكون جميع الفقرات داخل العناصر

سيكون لديهم حجم خط 14 بكسل.

ومع ذلك ، تجدر الإشارة إلى أنه عند استخدام القيم المطلقة ، هناك خطر من أن أحجام الخطوط قد تكون صغيرة جدا أو كبيرة جدا على الأجهزة ذات دقة الشاشة المختلفة.

بشكل عام ، يمكن أن يساعد استخدام القيم النسبية مثل النسب المئوية أو م في إنشاء تصميم أكثر استجابة وتنوعا يتكيف بشكل أفضل مع الأجهزة المختلفة وإعدادات المستخدم.

استخدام القيم النسبية

تسمح لك النسب المئوية بتعيين حجم الخط بالنسبة إلى حجم خط العنصر الأصل. على سبيل المثال ، إذا تم تعيين حجم الخط للعنصر الأصل على 16 بكسل ، وتم تعيين العنصر الفرعي على 80 ٪ ، فسيكون حجم خط العنصر الفرعي 12.8 بكسل (80 ٪ من 16).

تسمح لك وحدات القياس النسبية ، مثل إم و ريم ، بتعيين حجم الخط بالنسبة لحجم الخط داخل العنصر الحالي أو العنصر الجذر (الجسم). على سبيل المثال ، إذا تم تعيين حجم الخط للعنصر الجذر إلى 16 بكسل ، وتم تعيين حجم العنصر الفرعي إلى 1.5 م ، ثم حجم خط العنصر الفرعي سيكون 24 بكسل (1.5 * 16).

يتيح لك استخدام القيم النسبية إنشاء تصميم مرن وقابل للتكيف سيتم عرضه بشكل صحيح على أجهزة وشاشات مختلفة. بالإضافة إلى ذلك ، يسهل هذا الأسلوب قياس الخطوط وتغيير حجمها دون الحاجة إلى تغيير كل قيمة فردية.

أمثلة على استخدام القيم النسبية:

الجسم {

حجم الخط: 16 بكسل;

}

ص {

حجم الخط: 1.2 م ؛ / * ضبط حجم الخط على 1.2 ضعف حجم الخط الحالي */

}

ح1 {

حجم الخط: 150%; / * تعيين حجم الخط إلى 150 ٪ بالنسبة إلى العنصر الأصل */

}

م {

حجم الخط: 0.8 ريم ؛ / * ضبط حجم الخط على 0.8 م بالنسبة لحجم الخط داخل العنصر الحالي */

}

• باستخدام القيم النسبية ، يمكنك إنشاء تصميم متناغم ومتوازن يكون فيه النص قابلا للقراءة وسهل الاستخدام.

  • بالنسبة للعنصر ، تحديده بوحدات مطلقة مثل
  • حزب العمال

• على سبيل المثال ، لتعيين حجم الخط لفقرة إلى 16 بكسل ، إضافة التعليمات البرمجية التالية إلى

  • بالنسبة للعنصر ، تحديده في الوحدات النسبية مثل
  • ريم

على سبيل المثال ، لتعيين حجم الخط لفقرة إلى 1.2 مرة حجم الخط للعنصر الأصل ، إضافة التعليمات البرمجية التالية إلى

ص محدد

:

حجم الخط: 1.2 م;

عند تعيين أحجام الخطوط لعناصر مختلفة ، ضع في اعتبارك أنه يمكن توريث القيم في الوحدات النسبية من العناصر الأصلية. ضع في اعتبارك أيضا أن حجم الخط الصغير جدا أو الكبير جدا يمكن أن يؤثر سلبا على سهولة قراءة النص.

يمكنك تغيير حجم الخط للعناوين باستخدام خاصية حجم الخط المغلق. عادة ما يكون للعناوين الرئيسية حجم خط متزايد مقارنة بالنص الرئيسي على الصفحة لجذب انتباه القارئ. في كس ، يمكن تحديد أحجام الخطوط في وحدات قياس مختلفة ، مثل بكسل (بكسل) ، النسب المئوية ( ٪ ) ، أو م. من المهم اختيار حجم الخط المناسب للعناوين ، اعتمادا على تصميم وأسلوب صفحة الويب الخاصة بك.

مثال على تعيين حجم الخط للعنوان: