يعد تقليل حجم الخط أحد المهام الرئيسية لمطوري الويب والمصممين. يلعب كل عنصر من عناصر صفحة الويب دورا في نقل المعلومات وخلق تجربة سهلة الاستخدام. ومع ذلك ، في بعض الأحيان يكون من الضروري تقليل حجم الخط لجعل النص أكثر إحكاما أو أكثر قابلية للقراءة أو لوضع مزيد من المعلومات على الشاشة.
في هذه المقالة ، سنلقي نظرة على بعض الطرق البسيطة التي ستساعدك على تقليل حجم الخط. وتشمل هذه استخدام وحدات الخط مثل بكسل أو النسب المئوية ، وكذلك إعدادات كس مثل تقليل تباعد الأسطر وارتفاع الخط.
قبل البدء في تغيير حجم الخط على موقع الويب الخاص بك ، من المهم أن تتذكر أن حجم الخط يجب أن يكون قابلا للقراءة للمستخدمين. يمكن أن يتسبب النص الصغير جدا في حدوث مشكلات في إدراك المعلومات ، خاصة للأشخاص الذين يعانون من ضعف البصر أو على الأجهزة المحمولة ذات الشاشات الصغيرة.
ومع ذلك ، إذا كنت لا تزال تقرر تغيير حجم الخط ، فستساعدك الطرق التالية في تحقيق التأثير المطلوب. كل طريقة لها مزاياها وعيوبها ، لذا اختر الحل الذي يناسب حالتك الخاصة.
- باستخدام خط أصغر
- تغيير وحدات الخط
- استخدام الاختصارات والاختصارات
- إزالة المسافات والمسافات البادئة غير الضرورية
- باستخدام ضغط الخط
- استخدام خصائص كس الخاصة لتقليل حجم الخط
- فحص وتحسين حجم الخط للأجهزة المحمولة
باستخدام خط أصغر
يمكنك استخدام علامة لاستخدام خط أصغر. سيتم عرض النص المرفق في هذه العلامة بحجم أصغر من النص العادي.
ومع ذلك ، من المهم أن تضع في اعتبارك سهولة قراءة النص. يمكن أن يؤدي تقليل حجم الخط إلى جعل النص أقل قابلية للقراءة ، خاصة للمستخدمين الذين يعانون من ضعف البصر. لذلك ، يجب أن تكون حريصا على عدم تقليل حجم الخط كثيرا.
هناك طريقة أخرى لاستخدام خط أصغر وهي استخدام وحدات القياس "إم" أو "ريم". على سبيل المثال ، إذا قمت بتعيين حجم الخط للعنصر الأصل إلى 16 بكسل ، فيمكنك تعيين حجم العنصر الفرعي إلى 0.8 م أو 80 ٪ من حجم العنصر الأصل.
يمكن أن يكون استخدام خط أصغر مفيدا عند إنشاء جداول حيث تحتاج إلى احتواء كمية كبيرة من المعلومات في مساحة محدودة. في مثل هذه الحالات ، يمكنك تعيين حجم الخط لمحتويات الجدول ليكون أصغر بحيث يتناسب بشكل أفضل مع الخلايا.
تغيير وحدات الخط
إذا كنت ترغب في تغيير حجم الخط في هتمل ، ثم هناك عدة وحدات القياس التي يمكنك استخدامها:
| وحدة القياس | الوصف | مثال |
|---|---|---|
| بكسل | بكسل | حجم الخط: 16 بكسل; |
| م | نسبة إلى حجم خط العنصر الأصل | حجم الخط: 1.2 م; |
| ريم | ) | حجم الخط: 1.2 ريم; |
| % | نسبة إلى حجم خط العنصر الأصل كنسبة مئوية | حجم الخط: 120%; |
| حزب العمال | نقاط (1 نقطة = 1/72 بوصة) | حجم الخط: 12 نقطة; |
اختر وحدة القياس المناسبة حسب احتياجاتك وأسلوب التطوير.
استخدام الاختصارات والاختصارات
لتقليل حجم النص وتقليل حجم الخط ، يمكنك استخدام الاختصارات والاختصارات. سيسمح لك ذلك بنقل المعلومات بشكل أكثر إحكاما وتوفير المساحة.
من المهم أن تتذكر أن الاختصارات والاختصارات يجب أن تكون مفهومة ويمكن التعرف عليها للقارئ حتى لا يكون هناك سوء فهم ولا يضيع محتوى النص.
على سبيل المثال ، بدلا من عبارة "سيكون هناك اجتماع يوم الثلاثاء" ، يمكنك استخدام الاختصار "الثلاثاء. اجتماع". وبالتالي ، سينخفض عدد الأحرف وحجم الخط.
يمكنك أيضا استخدام الاختصارات للكلمات الطويلة أو أسماء المنظمات. على سبيل المثال ، بدلا من "المنظمة الدولية للتوحيد القياسي" ، يمكنك كتابة "وزارة التربية".
ومع ذلك ، يجب ألا تسيء استخدام الاختصارات والاختصارات ، لأن ذلك قد يجعل من الصعب فهم النص ويسبب ارتباكا للقارئ. من المهم الحفاظ على التوازن بين الشكل المختصر للنص وسهولة قراءته.
إزالة المسافات والمسافات البادئة غير الضرورية
عند تقليل حجم الخط على صفحة ويب ، من المهم أيضا إزالة جميع المسافات والمسافات البادئة غير الضرورية بحيث يشغل المحتوى مساحة أقل ويكون أكثر إحكاما.
تتمثل إحدى طرق إزالة المسافات في استخدام نمط" العرض:المضمن " للعناصر التي لا ينبغي فصلها بمسافات. على سبيل المثال ، يمكنك تطبيق هذا النمط على عناصر القائمة بحيث يتم عرضها في سطر واحد بدون مسافات بينها.
يمكنك أيضا استخدام خاصية" الهامش " لإزالة الهوامش. على سبيل المثال ، من خلال تعيين قيمة سالبة للمسافة البادئة العلوية لعنصر ما ، يمكننا تحريكه لأعلى وتقليل المسافة بين العناصر المتجاورة.
للحصول على تخطيطات أكثر تعقيدا ، حيث يلزم مزيد من التحكم في وضع العناصر ، يمكن استخدام الجداول. تسمح لك الجداول بتعيين الأبعاد والموضع الدقيق لكل خلية ، مما يسمح لك بإدارة المساحة على الصفحة بمرونة أكبر.
| مثال باستخدام جدول: | قبل | بعد |
| الركن 1 | النص | النص |
| الركن 2 | النص | النص |
| الركن 3 | النص | النص |
نتيجة لذلك ، ستساعد إزالة المسافات والمسافات البادئة غير الضرورية في تقليل حجم الخط وجعل المحتوى أكثر قابلية للقراءة وجمالية للمستخدمين.
باستخدام ضغط الخط
يعتمد ضغط الخط على إزالة بعض التفاصيل من أحرف الخط ، مما يسمح لك بتقليل حجم الملف به. يمكن تمكين ضغط الخط في رمز كس باستخدام خاصية عرض الخط.
هناك العديد من القيم التي يمكن تحديدها في خاصية عرض الخط:
افتراضي تلقائي. سيتم تنزيل الخط وتطبيقه على الفور. إذا لم يتم تحميل ملف الخط ، فسيتم استخدام كعب مثل خط النظام.
مبادلة - إذا فشل تحميل ملف الخط ، فسيتم استخدام الخط الفارغ حتى يتم تحميل ملف الخط. بعد تحميل الخط بنجاح ، سيتم استبدال الخط الفارغ بالخط الذي تم تنزيله.
احتياطي - إذا فشل تحميل ملف الخط ، فسيتم استخدام الخط الفارغ حتى يتم تحميل ملف الخط. ومع ذلك ، على عكس قيمة المبادلة ، لا يحل الخط الذي تم تنزيله محل كعب الروتين ، ولكن يتم تطبيقه بعد التحميل.
اختياري-تحميل وتطبيق الخط اختياري ، ويمكن تخطيه.
احتياطي-تنزيل الخط وتطبيقه إلزامي.
مثال على استخدام ضغط الخط باستخدام خاصية عرض الخط:
@الخط الوجه {
الخط الأسرة: 'روبوتو';
سرك: ورل('مسار/إلى/روبوتو-العادية.تف') شكل ('تروتايب');
- يمكن تحقيق تقليل حجم الخط باستخدام خصائص مختلفة في كس. فيما يلي بعض الأمثلة:
- يحدد حجم الخط إلى 12 بكسل.
- سوف يقلل من حجم الخط بمقدار النصف بالنسبة إلى س ارتفاع الحروف.
تباعد الحروف
: تتيح لك هذه الخاصية تعيين التباعد بين الأحرف. يمكن تعيين القيمة بالبكسل أو وحدات القياس الأخرى. على سبيل المثال,
تباعد الحروف: 2 بكسل;
يخلق فجوة 2 بكسل بين الأحرف.
تباعد الكلمات
: تسمح لك هذه الخاصية بتعيين التباعد بين الكلمات. يمكن تعيين القيمة بالبكسل أو وحدات القياس الأخرى. على سبيل المثال,
تباعد الكلمات: 5 بكسل;
فإنه سيتم إنشاء فجوة من 5 بكسل بين الكلمات.
باستخدام هذه الخصائص في كس ، يمكنك بسهولة التحكم في حجم الخط وتمثيل النص على صفحة ويب.
فحص وتحسين حجم الخط للأجهزة المحمولة