عرض مصدر CSS/font-size

<noinclude>{{DISPLAYTITLE:الخاصية <code>font-size</code>}}</noinclude>
الخاصية <code>font-size</code> في CSS تضبط حجم الخط، وضبط حجم الخط قد يؤدي إلى تغيير حجم عناصر أخرى، لأن حجم الخط سيُستخدَم لحساب قيمة الأطوال <code>[[CSS/length|<length>]]</code> ذات الواحدة <code>em</code> و <code>ex</code>.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>medium</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|نعم
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.
|}

<syntaxhighlight lang="css">
/* <absolute-size> كلمات محجوزة تُمثِّل أحجامًا مطلقة */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* <relative-size> كلمات محجوزة تمثل أحجامًا نسبيةً */
font-size: smaller;
font-size: larger;

/* <length> أطوال مطلقة */
font-size: 12px;
font-size: 0.8em;

/* <percentage> أطوال نسبية */
font-size: 80%;

/* القيم العامة */
font-size: inherit;
font-size: initial;
font-size: unset;
</syntaxhighlight>

== أمثلة ==
مثال عن استخدام مختلف القيم والكلمات المحجوزة مع الخاصية <code>font-size</code>:<syntaxhighlight lang="html">
<div id="container">
  <p id="xx-small">xx-small</p>
  <p id="x-small">x-small</p>
  <p id="small">small</p>
  <p id="medium">medium</p>
  <p id="large">large</p>
  <p id="x-large">x-large</p>
  <p id="xx-large">xx-large</p>
  <p id="twelve-px">12px</p>
  <div id="parent-twelve-px">
    12px
    <p id="smaller">smaller</p>
    <p id="larger">larger</p>
    <p id="zero-dot-eight-em">0.8em</p>
  </div>
  <div id="parent-twenty-four-px">
    24px
    <p id="smaller">smaller</p>
    <p id="larger">larger</p>
    <p id="zero-dot-eight-em">0.8em</p>
  </div>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
#container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

div > p {
  border: 1px solid black;
  display: flex;
  align-items: center;
  margin: 8px;
  padding: 8px;
}

#parent-twelve-px,
#parent-twenty-four-px {
  display: flex;
  border: 1px solid black;
  padding: 8px;
  margin: 8px;
}
            
#parent-twelve-px      { font-size: 12px; }
#parent-twenty-four-px { font-size: 24px; }
#xx-small              { font-size: xx-small; }
#x-small               { font-size: x-small; }
#small                 { font-size: small; }
#medium                { font-size: medium; }
#large                 { font-size: large; }
#x-large               { font-size: x-large; }
#xx-large              { font-size: xx-large; }
#smaller               { font-size: smaller; }
#larger                { font-size: larger; }
#twelve-px             { font-size: 12px; }
#zero-dot-eight-em     { font-size: 0.8em; }
</syntaxhighlight>
== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.0
|5.5
|7
|1.0
|}

== البنية العامة ==
يمكن تحديد  الخاصية <code>font-size</code> بطريقتين:
* استخدام كلمة محجوزة، التي تمثِّل حجمًا مطلقًا، أو حجمًا نسبيًا.
* استخدام أطوال مطلقة أو نسبية.

=== الكلمات المحجوزة ===
تُقسَم الكلمات المحجوزة إلى قسمين: كلمات محجوزة تمثل حجمًا مطلقًا، و كلمات محجوزة تمثِّل حجمًا نسبيًا.

==== الحجوم المطلقة ====
<code>xx-small</code> و <code>x-small</code> و <code>small</code> و <code>medium</code> و <code>large</code> و <code>x-large</code> و <code>xx-large</code>.

تضبط هذه الكلمات المحجوزة حجم الخط اعتمادًا على حجم الخط الافتراضي (الذي هو <code>medium</code>).

==== الحجوم النسبية ====
<code>larger</code> و <code>smaller</code>.

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

===  <code>[[CSS/length|<length>]]</code> ===
قيمة طولية موجبة. وعندما تكون واحدة القيمة الطولية المستعملة هي <code>em</code> أو <code>ex</code>، فسيكون حجم الخط المُعرَّف نسبيًا إلى حجم الخط المستخدم في العنصر الأب للعنصر الهدف، فمثلًا القيمة <code>0.5em</code> تعني أنَّ حجم الخط للعنصر الحالي هو نصف حجم الخط للعنصر الأب له؛ وعندما تكون واحدة القيمة الطولية هي <code>rem</code>، فسيكون حجم الخط نسبيًا إلى حجم الخط المستخدم في العنصر الجذر (ألا وهو العنصر <code>[[HTML/html|<html>]]</code>).

===  <code>[[CSS/percentage|<percentage>]]</code> ===
نسبة مئوية من حجم الخط للعنصر الأب.

من الأفضل استخدام حجوم نسبية إلى حجم الخط الافتراضي في جهاز المستخدم، وتجنّب استخدام الأطوال المطلقة التي تستخدم واحدات عدا <code>em</code> أو <code>ex</code> (أو <code>rem</code>)؛ لكن إن كان لا بُدّ، فمن المفضَّل استخدام واحدة <code>px</code> على بقية الواحدات، لأن معناها لا يتغير اعتمادًا على دقة الشاشة التي يقدرها نظام التشغيل (ويُقدِّر تقديرًا خطأً في أغلبية الحالات).

=== البنية الرسمية ===
<syntaxhighlight lang="css">
font-size: <absolute-size> | <relative-size> | <length-percentage>;
</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large
<relative-size> = larger | smaller
<length-percentage> = <length> | <percentage>
</syntaxhighlight>

== نُهج الاستخدام ==
هنالك عدِّة طرائق لتحديد حجم الخط، إذ يمكن استخدام الكلمات المحجوزة أو القيم الطولية سواءً كانت بواحدة البكسل أو <code>em</code>؛ وعليك اختيار المنهجية المناسبة اعتمادًا على احتياجاتك وعلى مستند HTML الذي تعمل عليه.

=== الكلمات المحجوزة ===
استخدام الكلمات المحجوزة هو أمرٌ حسنٌ لضبط حجم الخطوط في الويب، فلو ضبطت حجم الخط في العنصر <code>[[HTML/body|<body>]]</code> باستخدام كلمة محجوزة، فيمكنك استخدام حجوم خطوط منسوبة إلى تلك القيمة، مما يسمح لك بتكبير (أو تصغير) حجم الخط في كامل الصفحة إن أردتَ ذلك.

=== البكسلات ===
ضبط حجم الخط بواحدة البكسل <code>px</code> هو خيارٌ جيدٌ إن كنت تريد تحديد الحجم بدقة، فواحدة البكسل ثابتة، ومستقلة عن نظام التشغيل، وتجعل المتصفحات (باختلاف أنواعها) تعرض الأحرف بارتفاعٍ يساوي القيمة التي حددتها؛ لاحظ أنَّ النتائج قد تختلف اختلافًا طفيفًا بين المتصفحات، لأنها تستخدم خوارزميات مختلفة لحساب حجم الخط.

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

=== واحدة <code>em</code> ===
طريقة أخرى لضبط حجم الخط هي استخدام قيم ذات الواحدة em، فقياس هذه الواحدة ديناميكي، فعند تعريف قيمة الخاصية <code>font-size</code>، فستكون <code>1em</code> مساويةً إلى حجم الخط المستخدم في العنصر الأب، وإذا لم تضبط حجم الخط في أيّ مكان في الصفحة، فسيُستعمَل حجم الخط الافتراضي في المتصفح، ويكون عادةً <code>16px</code>، أي أنَّ <code>1em=16px</code> و <code>2em=32px</code>، وإذا ضبطتَ قيمة الخاصية <code>font-size</code> إلى 20px في العنصر <code>[[HTML/body|<body>]]</code>، فسيكون <code>1em=20px</code> و <code>2em=40px</code>.

لحساب القيمة التي تريد وضعها بواحدة <code>em</code> فيمكنك تقسيم حجم العنصر المطلوب على حجم العنصر الأب بواحدة البكسل.

فمثلًا، لنقل أنَّ حجم الخط في العنصر <code>[[HTML/body|<body>]]</code> مضبوطٌ إلى <code>16px</code>، وإذا كان حجم الخط الذي تريد تطبيقه على العنصر الحالي هو <code>12px</code>، فعليك أن تُحدِّد القيمة <code>0.75em</code> (وذلك لأنَّ <code>12/16</code> تساوي <code>0.75</code>)، وبشكلٍ مشابه، إذا أردتَ حجم الخط <code>10px</code> فاستعمل <code>0.625em</code> (لأنَّ <code>10/16</code> تساوي <code>0.625</code>)، أما لقياس <code>22px</code> فاستعمل <code>1.375em</code> (أي <code>22/16</code>).

واحدة <code>em</code> مفيدة جدًا في CSS لأنها تكون منسوبةً إلى حجم الخط الذي اختاره المستخدم في إعدادات المتصفح.

من المهم جدًا ملاحظة كيف تتراكم قيمة الواحدة em، فخذ شيفرة HTML الآتية:<syntaxhighlight lang="html">
<span>Outer <span>inner</span> outer</span>
</syntaxhighlight>وشيفرة CSS:<syntaxhighlight lang="css">
span { 
  font-size: 1.6em; 
}
</syntaxhighlight>لاحظ الناتج:
<div dir="ltr">
<span style="font-size:1.6em;">Outer <span style="font-size:1.6em;">inner</span> outer</span>
</div>بفرض أنَّ حجم الخط <code>font-size</code> الافتراضي في المتصفح هو <code>16px</code>، فالكلمتين outer في المثال السابق سيكون حجمهما هو <code>1.6×16 = 25.6px</code>، بينما ستُعرَض الكلمة inner بحجم <code>40.96px</code>، لأنَّ حجم الخط لعنصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code> الداخلي هو <code>1.6em</code> نسبةً إلى حجم الخط للعنصر الأب، الذي بدوره هو <code>1.6em</code> نسبةً إلى حجم الخط للعنصر الأب ...إلخ. يسمى هذا التأثير بالتراكم.

=== واحدة <code>rem</code> ===
أُضيفتَ الواحدة <code>rem</code> لحل مشكلة التراكم مع الواحدة <code>em</code>، إذ إنَّ قيم <code>rem</code> تكون نسبيةً إلى حجم الخط في العنصر الجذر <code>[[HTML/html|<html>]]</code>، وليس للعنصر الأب، أي يمكن تحديد حجم الخط بطريقة نسبية لكن دون التأثر بحجم خط العنصر الأب، مما يحل مشكلة التراكم.

شيفرة CSS الآتية مماثلة تمامًا لشيفرة CSS في القسم السابق، باستثناء تحويل الواحدة إلى <code>rem</code> بدلًا من <code>em</code>:<syntaxhighlight lang="css">
span {
  font-size: 1.6rem;
}
</syntaxhighlight>سنُطبِّق القاعدة السابقة على شيفرة HTML الآتية:<syntaxhighlight lang="css">
<span>Outer <span>inner</span> outer</span>

</syntaxhighlight>تجربة حيّة:
<div dir="ltr">
<span style="font-size:1.6rem;">Outer <span style="font-size:1.6rem;">inner</span> outer</span>
</div>
لاحظ كيف عُرِضَت جميع الكلمات بنفس حجم الخط (<code>25.6px</code>، بفرض أنَّ حجم الخط الافتراضي للمتصفح هو <code>16px</code>).

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-fonts-3/#font-size-prop CSS Fonts Module Level 3].
* مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions].
* مواصفة [http://www.w3.org/TR/CSS2/fonts.html#propdef-font-size ‎CSS Level 2 (Revision 1)]‎.
* مواصفة [http://www.w3.org/TR/CSS1/#font-size CSS Level 1]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Font|{{SUBPAGENAME}}]]