وثائق CSS قابلة للتشغيل: حجم الخط font-size

Q: كيف أغيّر حجم الخط في CSS؟

اضبط الخاصية font-size على العنصر: p { font-size: 18px; }. تقبل الأطوال (px وrem وem) والنسب المئوية والكلمات المفتاحية مثل large.

Q: كيف أغيّر حجم الخط في HTML؟

عبر CSS، إما في ملف أنماط أو في السمة style: . الوسم القديم ملغى في HTML5 ويجب ألا يُستخدم.

Q: هل أستخدم px أم em أم rem لحجم الخط؟

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

Q: لماذا يستمر حجم الخط بـ em في الكبر؟

لأن em نسبية إلى حجم خط الأب، فتتضاعف العناصر المتداخلة: 1.2em داخل 1.2em تساوي 1.44 ضعف الأساس. انتقل إلى rem، فهي نسبية دائمًا إلى العنصر الجذر.

كيف تضبط حجم الخط في CSS

تضبط الخاصية font-size حجم النص. ضعها على أي عنصر وسيرث كل نص بداخله ذلك الحجم، ما لم يضبط ابن حجمه الخاص.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .big { font-size: 1.5rem; }
    .huge { font-size: 48px; }
  </style>
</head>
<body>
  <p class="small">12px</p>
  <p class="normal">16px (the browser default)</p>
  <p class="big">1.5rem (24px)</p>
  <p class="huge">48px</p>
</body>
</html>

لتغيير حجم الخط في HTML تستخدم CSS أيضًا. أضف السمة style () أو قاعدة في ملف الأنماط. الوسم  من التسعينيات ملغى ولا مكان له في صفحة حديثة.

الوحدات التي تقبلها font-size

القيمة	مثال	نسبةً إلى ماذا
`px`	`16px`	لا شيء: حجم ثابت
`rem`	`1.25rem`	حجم خط العنصر الجذر `<html>` (16px افتراضيًا)
`em`	`1.2em`	حجم خط العنصر الأب
`%`	`120%`	حجم خط الأب، مثل `em` (`120%` تساوي `1.2em`)
كلمة مفتاحية	`large`	مقياس محدد مسبقًا حول القيمة الافتراضية `medium`
كلمة مفتاحية نسبية	`smaller`، `larger`	خطوة واحدة عن حجم الأب
نافذة العرض	`4vw`	عرض نافذة العرض (4% منه)
دالة	`clamp(1rem, 4vw, 2rem)`	مرن بين حد أدنى وحد أقصى

اكتب قيمة وشاهد الحجم الذي يحسبه المتصفح:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { border: 1px dashed #9ca3af; padding: 8px; margin: 12px 0; }
  </style>
</head>
<body>
  <label>font-size: <input id="val" value="1.5rem" size="20"></label>
  <p id="sample">The quick brown fox</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.fontSize = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).fontSize;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

جرّب 20px و2em و150% وx-large وsmaller و5vw. القيمة غير الصالحة، مثل big، تُتجاهل ويحتفظ النص بآخر حجم صالح.

الفرق بين rem وem: الفرق الذي يفاجئك

تنظر rem دائمًا إلى العنصر الجذر، لذلك 1.2rem بالحجم نفسه أينما ظهرت. أما em فتنظر إلى الأب، فتتضاعف الأحجام حين تتداخل العناصر:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em compounds</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .em { font-size: 1.2em; }
    .rem { font-size: 1.2rem; }
    div { border-inline-start: 3px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">1.2em
    <div class="em">1.2em inside
      <div class="em" id="deep-em">1.2em inside again</div>
    </div>
  </div>
  <div class="rem">1.2rem
    <div class="rem">1.2rem inside
      <div class="rem" id="deep-rem">1.2rem inside again</div>
    </div>
  </div>
</body>
</html>

صندوق em الأعمق يساوي 16 × 1.2 × 1.2 × 1.2 = 27.648px. وصندوق rem الأعمق ما زال 19.2px. هذا التضاعف مفيد لمكوّن يجب أن تتغير أجزاؤه معًا، ومفاجئ في كل مكان آخر. تقارن صفحة الوحدات كل وحدات الطول.

الكلمات المفتاحية: من xx-small إلى xx-large

تقابل الكلمات المفتاحية المطلقة مقياسًا ثابتًا حول medium، التي تساوي الحجم الافتراضي للمستخدم (16px ما لم يغيّره):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size keywords</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-size: xx-small;">xx-small</p>
  <p style="font-size: x-small;">x-small</p>
  <p style="font-size: small;">small</p>
  <p style="font-size: medium;">medium</p>
  <p style="font-size: large;">large</p>
  <p style="font-size: x-large;">x-large</p>
  <p style="font-size: xx-large;">xx-large</p>
  <script>
    document.querySelectorAll('p').forEach((p) => {
      p.textContent += ': ' + getComputedStyle(p).fontSize;
    });
  </script>
</body>
</html>

مع الحجم الافتراضي 16px تكون small بحجم 13px، وlarge بحجم 18px، وx-large بحجم 24px، وxx-large بحجم 32px. الكلمات المفتاحية مناسبة للعمل السريع، لكن نظام التصميم يريد عادةً مقياسه الخاص بـ rem.

حجم خط مرن مع clamp()

العنوان الذي يجب أن يكبر مع الشاشة لكن لا يصبح صغيرًا جدًا أو كبيرًا جدًا هو استدعاء واحد لـ clamp(): الحد الأدنى، ثم حجم مفضل يتغير، ثم الحد الأقصى.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid heading</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 {
      /* never below 1.5rem, never above 3rem, 5vw in between */
      font-size: clamp(1.5rem, 5vw, 3rem);
      margin: 0;
    }
  </style>
</head>
<body>
  <h1 id="title">Fluid heading</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'computed: ' + getComputedStyle(document.getElementById('title')).fontSize;
  </script>
</body>
</html>

في معاينة بعرض 800px تساوي 5vw قيمة 40px، وهي بين 24px و48px، فتفوز. تشرح صفحة clamp الخطوط المرنة بعمق.

ضبط حجم أساسي للصفحة كلها

اضبط الحجم مرة واحدة على body (أو html) واجعل كل شيء آخر نسبيًا إليه:

html { font-size: 100%; }  /* respects the user's setting, usually 16px */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }
small, .caption { font-size: 0.875rem; }

تجنب حيل html { font-size: 62.5%; } إلا إذا كان كل حجم في الصفحة مضبوطًا بعدها بـ rem، ولا تضبط أبدًا حجمًا ثابتًا بـ px على html: فهو يتجاوز حجم الخط الذي اختاره القارئ في متصفحه، وبعض الناس يعتمدون عليه كي يستطيعوا القراءة أصلًا.

ملاحظات حول سهولة الوصول

نص الجسم بحجم 16px أو أكثر حد أدنى جيد للقراءة على الشاشات.
الأحجام بـ rem وem تتبع إعداد الخط الافتراضي للمستخدم. أما الأحجام بـ px فتتبع تكبير الصفحة لكن لا تتبع ذلك الإعداد.
على iPhone يكبّر Safari الصفحة حين تركّز على حقل إدخال حجم خطه أقل من 16px. أعطِ حقول النماذج font-size: 1rem أو أكثر لتجنب ذلك.

أخطاء شائعة

استخدام الوسم . إنه ملغى. استخدم الخاصية font-size.
أحجام em متداخلة تكبر أو تصغر بلا سيطرة. استخدم rem ما لم تكن تريد التضاعف.
حجم ثابت بـ px على html. يتجاوز إعداد الخط الخاص بالقارئ.
نسيان أن للعناوين حجمًا أصلًا. <h1> حجمه 2em افتراضيًا، لذلك تحتاج إلى h1 { font-size: 1em; } إن أردته بحجم نص الجسم.
وحدات نافذة العرض وحدها. font-size: 3vw تصبح غير مقروءة على الهاتف وضخمة على شاشة عريضة. أحطها بـ clamp().

الأسئلة الشائعة

كيف أغيّر حجم الخط في CSS؟

اضبط الخاصية font-size على العنصر: p { font-size: 18px; }. تقبل الأطوال (px وrem وem) والنسب المئوية والكلمات المفتاحية مثل large.

كيف أغيّر حجم الخط في HTML؟

عبر CSS، إما في ملف أنماط أو في السمة style: . الوسم القديم  ملغى في HTML5 ويجب ألا يُستخدم.

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

16px لنص الجسم، ما لم يغيّره المستخدم في إعدادات المتصفح. هذه القيمة هي ما تساويه 1rem والكلمة المفتاحية medium افتراضيًا.

هل أستخدم px أم em أم rem لحجم الخط؟

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

لماذا يستمر حجم الخط بـ em في الكبر؟

لأن em نسبية إلى حجم خط الأب، فتتضاعف العناصر المتداخلة: 1.2em داخل 1.2em تساوي 1.44 ضعف الأساس. انتقل إلى rem، فهي نسبية دائمًا إلى العنصر الجذر.

مفاهيم ذات صلة