يلعب ظهور النص على صفحة الويب دورا مهما في إنشاء تجربة مستخدم جيدة. أحد العناصر التي يمكن أن تؤثر على تصور النص هو ارتفاعه. عندما يتم تمثيل النص الموجود على الصفحة بأحرف صغيرة ومضغوط للغاية بين السطور ، فقد يؤدي ذلك إلى صعوبة القراءة وخلق انطباع سلبي لدى المستخدمين.
باستخدام كس ، يمكنك بسهولة وبسرعة تغيير ارتفاع الخط على صفحة ويب. في هذا الدليل البسيط ، سننظر في عدة طرق ستساعدك على التحكم في هذه المعلمة وإنشاء نص أكثر قابلية للقراءة.
تتمثل إحدى الطرق الرئيسية لتغيير ارتفاع الخط في استخدام خاصية ارتفاع الخط. بشكل افتراضي ، تكون قيمة هذه الخاصية طبيعية ، ولكن يمكنك تحديد القيمة الخاصة بك لزيادة أو تقليل المسافة بين السطور. على سبيل المثال:
ص { ارتفاع الخط: 1.5؛}
يحدد هذا الرمز ارتفاع الخط إلى 1.5 بالنسبة لحجمه. ستؤدي قيمة ارتفاع السطر الأعلى إلى مساحة أكبر بين السطور ، والتي يمكن استخدامها لتحسين إمكانية قراءة النص.
- ما هو المغلق ولماذا أحتاج إلى تغيير ارتفاع الخط?
- الحصول على قيمة ارتفاع الخط
- استخدام خاصية حجم الخط
- تغيير قيمة ارتفاع الخط
- تطبيق القيم النسبية والمطلقة
- أمثلة على تغيير ارتفاع الخط في كس
ما هو المغلق ولماذا أحتاج إلى تغيير ارتفاع الخط?
يعد تغيير ارتفاع الخط أحد الخصائص الرئيسية التي يمكن تهيئتها باستخدام كس. يتيح لك ذلك التحكم في حجم الخط ووضوحه على صفحة الويب. يمكن أن يكون تغيير ارتفاع الخط مفيدا لتحسين إمكانية قراءة النص أو تمييز العناوين أو إنشاء تصميم مثير للاهتمام.
الحصول على قيمة ارتفاع الخط
.
هناك عدة طرق لتعيين قيمة ارتفاع الخط:
- ).
- ).
. سيتم الإشارة هنا إلى قيمة ارتفاع الخط الحالية بالبكسل أو وحدة قياس أخرى.
استخدام خاصية حجم الخط
يتم استخدام الخاصية حجم الخط في المغلق لتعيين حجم الخط لعنصر. يمكنك تعيين حجم الخط بالبكسل أو النسب المئوية أو وحدات القياس الأخرى.
مثال على استخدام خاصية حجم الخط:
| وحدة القياس | مثال | الوصف |
|---|---|---|
| من بكسل | حجم الخط: 16 بكسل; | يتم تعيين حجم الخط بالبكسل |
| % | حجم الخط: 150%; | يتم تعيين حجم الخط كنسبة مئوية نسبة إلى حجم الخط الأصل |
| م العنصر | حجم الخط: 1.2 م; | يتم تعيين حجم الخط إلى م ، حيث يساوي 1 م حجم خط العنصر الأصل. على سبيل المثال ، سيكون 1.2 م أكبر بنسبة 20٪ من حجم خط العنصر الأصل |
.
مثال على تعيين حجم الخط للمستند بأكمله:
الجسم {حجم الخط: 14 بكسل;
}
تغيير قيمة ارتفاع الخط
.
- ارتفاع الخط
- خط الارتفاع: عادي;
- خط الارتفاع: عدد;
- ارتفاع الخط: الطول;
- يحدد القيمة في وحدة قياس معينة ، على سبيل المثال ، وحدات البكسل أو النسب المئوية;
- - يحدد قيمة النسبة المئوية بالنسبة لحجم الخط.
- خط الارتفاع: 1.2;
- ارتفاع الخط: 20 بكسل;
- ارتفاع الخط: 1.5 م;
- يحدد ارتفاع الخط إلى 150 ٪ نسبة إلى حجم الخط.
يمكن أن يؤثر تغيير قيمة ارتفاع الخط على مظهر النص وتصميم صفحات الويب الخاصة بك. استخدم العقار
ارتفاع الخط
بحكمة لتحقيق النتيجة المرجوة.
تطبيق القيم النسبية والمطلقة
يمكنك استخدام كل من القيم النسبية والمطلقة لتغيير ارتفاع الخط في كس. كل نوع له خصائصه الخاصة ويستخدم في مواقف معينة.
تتغير القيم النسبية بناء على حجم العنصر الأصل أو السياق الحالي. وهي تمثل النسب المئوية لحجم الخط الأساسي أو تشير إلى مضاعف بحجم معين.
على سبيل المثال ، عند استخدام القيمة "الأكبر" ، سيتم زيادة ارتفاع الخط بمقدار واحد من القيمة الأساسية. وإذا حددت قيمة النسبة المئوية ، على سبيل المثال" 150 ٪ " ، سيزداد ارتفاع الخط بنسبة 50 ٪ من القيمة الأساسية.
القيم المطلقة ، على عكس القيم النسبية ، مستقلة عن السياق وتظل ثابتة بغض النظر عن المعلمات الأخرى. وعادة ما يتم تحديدها بالبكسل ، ولكن يمكن أيضا استخدام وحدات قياس أخرى (على سبيل المثال ، "إم" أو "ريم").
- يوصى باستخدام القيم النسبية في الحالات التي يتطلب فيها تغيير حجم الخط الديناميكي ، مع مراعاة السياق. على سبيل المثال ، في حالة التصميم التكيفي ، عندما يتغير حجم شاشة جهاز المستخدم.
- باستخدام خاصية ارتفاع الخط
- ص {
تعتبر القيم المطلقة ملائمة للاستخدام عندما يكون من الضروري تعيين حجم خط ثابت بدقة لن يتغير تحت أي ظرف من الظروف.
أمثلة على تغيير ارتفاع الخط في كستتيح لك خاصية ارتفاع الخط ضبط ارتفاع سطر النص. يمكنك استخدام القيم المطلقة ، مثل وحدات البكسل ، أو وحدات القياس النسبية ، مثل النسب المئوية. على سبيل المثال:
خط الارتفاع: 1.5;
}