يعد حجم الخط المختار جيدا جانبا مهما من تصميم الويب. يضمن الخط الصحيح وحجم النص سهولة القراءة ويجعل الموقع ممتعا للمستخدم. حتى التغيير البسيط في حجم الخط يمكن أن يؤثر بشكل كبير على إدراك المحتوى. في هذه المقالة ، سنلقي نظرة على خمس طرق مفيدة لزيادة حجم الخط باستخدام الأنماط.
الطريقة الأولى هي استخدام وحدات القياس المطلقة ، مثل النقاط (نقطة) أو وحدات البكسل (بكسل). تحدد هذه الوحدات حجم النص بقيم محددة ، مما يسمح لك بالتحكم بدقة في حجمه. ومع ذلك ، يجب أن نتذكر أن استخدام الوحدات المطلقة يمكن أن يؤدي إلى مشاكل في إمكانية الوصول والقدرة على التكيف ، لذلك يوصى باستخدامها بحذر.
الطريقة الثانية هي استخدام وحدات القياس النسبية ، مثل النسب المئوية ( ٪ ) أو م (م). وهي تستند إلى الحجم النسبي للعنصر الأصل أو النص الرئيسي. يتيح لك ذلك إنشاء تصميم متكيف سيتم عرضه بشكل صحيح على أجهزة مختلفة وعندما يتغير حجم الشاشة. استخدم الوحدات النسبية لجعل النص الخاص بك قابلا للتطوير وسهل القراءة.
الطريقة الثالثة هي استخدام أنماط كس لتغيير حجم الخط. للقيام بذلك ، يمكنك تعيين حجم الخط بالبكسل أو النسب المئوية أو استخدام قيم أخرى مختلفة. بالإضافة إلى ذلك ، يمكنك تطبيق الأنماط على العناصر الفردية أو الفئات لإنشاء تصميم مرن ومتسق في جميع أنحاء الموقع. يتيح لك ذلك تغيير حجم الخط بسهولة على صفحات وأقسام مختلفة من موقعك.
الطريقة الرابعة هي استخدام أطر كس الخاصة التي توفر أدوات جاهزة لإدارة أحجام الخطوط. على سبيل المثال ، توفر أطر العمل مثل التمهيد أو الأساس العديد من الفئات والمكونات لتخصيص مظهر النص. إنها تجعل عملية تغيير حجم الخط بسيطة وبديهية ، حتى للمبتدئين في تطوير الويب.
الطريقة الخامسة هي استخدام ميزات كس 3 ، مثل وحدات ضبط حجم الخط أو خاصية ريم النسبية التي تحدد حجم الخط بالنسبة لحجم العنصر الجذر. هذا يساعد على خلق تصميم متناغم ومتوازن في جميع أنحاء الموقع. استخدم هذه الميزات لتحسين تجربة المستخدم وجعل المحتوى الخاص بك أكثر سهولة ومتعة للقراءة.
- زيادة حجم الخط باستخدام خاصية حجم الخط المغلق
- استخدام القيم المطلقة
- استخدام القيم النسبية
زيادة حجم الخط باستخدام خاصية حجم الخط المغلق
:
- يحدد حجم الخط إلى 16 بكسل.
- سيؤدي أيضا إلى زيادة حجم الخط بنسبة 20٪.
- يحدد حجم الخط إلى 12 نقطة.
- فإنه سيتم تعيين حجم خط صغير.
- يزيد حجم الخط بمقدار 10 بكسل بالنسبة إلى الحجم الأساسي.
يسمح لك بالتحكم بسهولة في حجم النص على صفحة الويب وإنشاء محتوى أكثر قابلية للقراءة ودقة للمستخدمين.
استخدام القيم المطلقة
لتعيين حجم الخط المطلق ، يمكنك استخدام خاصية حجم الخط المغلق. على سبيل المثال ، لتعيين حجم خط 18 بكسل ، يمكننا كتابة الكود التالي:
مثال:
النص مع الخط الموسع
في هذا المثال ، نحدد القيمة" 18 بكسل " لخاصية حجم الخط. هذا يعني أن حجم الخط سيكون 18 بكسل.
يمكن أن يكون استخدام القيم المطلقة مفيدا عندما تحتاج إلى ضبط حجم الخط بدقة بالبكسل أو وحدات القياس الأخرى. ومع ذلك ، ضع في اعتبارك أن هذا الأسلوب يمكن أن يتسبب في حدوث مشكلات في التوافق والقدرة على التكيف ، حيث لن يتم قياس حجم الخط تلقائيا اعتمادا على حجم الشاشة أو إعدادات المستخدم.
استخدام القيم النسبية
يمكن استخدام وحدتين أساسيتين للقياس لتعيين حجم الخط النسبي: النسب المئوية ( ٪ ) والوحدات النسبية (إم و ريم).
. على سبيل المثال ، إذا كان حجم الخط الأساسي 100 ٪ ، فعند تعيين حجم الخط كنسبة مئوية بنسبة 120 ٪ ، سيتم استخدام خط بحجم أكبر بنسبة 20 ٪ من القاعدة.
تسمح لك الوحدات النسبية (إم و ريم) بتعيين حجم الخط بالنسبة إلى حجم العنصر الأصل. تقوم وحدة إم بتعيين حجم الخط بالنسبة إلى العنصر الأصل ، وتقوم وحدة حركة العين السريعة بتعيين حجم الخط بالنسبة إلى الحجم الأساسي.
على سبيل المثال ، إذا كان حجم خط العنصر الأصل 16 بكسل ، وكان حجم خط العنصر الفرعي 1.5 م ، فسيكون حجم خط العنصر الفرعي 24 بكسل (16*1.5). إذا كنت تستخدم الريم بدلا من إم ، فسيتم حساب حجم الخط بالنسبة إلى الحجم الأساسي.
يتيح لك استخدام القيم النسبية إنشاء تصميم متكيف مع تحكم مرن في حجم الخط للأجهزة المختلفة ودقة الشاشة.