الانتقال إلى المحتوى الرئيسي

كيفية تقليل حجم الخط في النص: 5 طرق بسيطة

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

1. استخدام العلامة: تتيح لك هذه العلامة تقليل حجم الخط بداخلك. يمكنك لف القسم المطلوب من النص في علامة وتعيينه على الحجم المطلوب. على سبيل المثال: النص.

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

}

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

النص

3. باستخدام وحدات القياس إم: تسمح لك وحدة القياس إم بتعيين حجم الخط بالنسبة إلى الأصل. على سبيل المثال ، إذا كان حجم خط العنصر الأصل 16 بكسل ، فقم بتعيين القيمة م: 0.8 ، سيكون الخط داخل هذا العنصر 0.8 * 16 بكسل = 12.8 بكسل. على سبيل المثال:

النص

4. استخدام وحدات الريم للقياس: تسمح لك وحدة قياس حركة العين السريعة بتعيين حجم الخط بالنسبة لحجم خط عنصر الجذر. عادة ، يتم تعيين القيمة بالبكسل أو كنسبة مئوية من عرض الشاشة. مثال على استخدام وحدة قياس حركة العين السريعة:

النص

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

تقليل حجم الخط في النص: 5 طرق بسيطة

1. باستخدام العلامة

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

2. استخدام خاصية حجم الخط المغلق

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

3. استخدام وحدات القياس في المغلق

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

4. باستخدام فئات النمط

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

5. باستخدام ورقة الأنماط

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

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

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

استخدام خاصية حجم الخط المغلق

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

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

لتعيين حجم الخط باستخدام الخاصية المغلق حجم الخط ، يمكنك استخدام بناء الجملة التالي:

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

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

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

أو لتعيين حجم الخط إلى 80٪ من حجم العنصر الأصل ، استخدم القاعدة التالية:

حجم الخط: 80%;

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

تطبيق وحدات القياس إم و ريم

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

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

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

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

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

تغيير حجم الخط في المتصفح

  1. باستخدام وحدات القياس %
  2. باستخدام وحدة القياس ٪ ، يمكنك تقليل حجم الخط بالنسبة إلى قيمته الأصلية. على سبيل المثال ، لتعيين حجم خط بنسبة 80٪ من الأصل ، يمكنك استخدام رمز كس التالي:

  3. ص {
  4. حجم الخط: 80%;

  5. باستخدام وحدات القياس إم

  6. ص {

  7. استخدام وحدات الريم للقياس
  8. تسمح لك وحدة قياس حركة العين السريعة ، على عكس إم ، بتعيين حجم الخط بالنسبة لعنصر الجذر (عادة). هذا مناسب لإنشاء قابلية موحدة للخط في جميع أنحاء الموقع. على سبيل المثال ، لتعيين حجم الخط إلى 1.2 ريم (أي 120 ٪ من القاعدة) ، يمكنك استخدام رمز كس التالي:

    حجم الخط: 1.2 ريم;

}

باستخدام فئات كس

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

.نص صغير { حجم الخط: 12 بكسل؛}