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