الفرق بين المراجعتين لصفحة: «CSS/font-size»

مراجعة 15:34، 28 يناير 2018

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

/* <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;

القيمة الابتدائية	`medium`
تُطبَّق على	جميع العناصر.
قابلة للوراثة	نعم
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

أمثلة

مثال عن استخدام مختلف القيم والكلمات المحجوزة مع الخاصية font-size:

<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>

شيفرة 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; }

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	5.5	7	1.0

البنية العامة

يمكن تحديد قيمة الخاصية font-size بطريقتين:

استخدام كلمة محجوزة، التي تمثِّل حجمًا مطلقًا، أو حجمًا نسبيًا.
استخدام أطوال مطلقة أو نسبية.

الكلمات المحجوزة

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

الحجوم المطلقة

xx-small و x-small و small و medium و large و x-large و xx-large.

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

الحجوم النسبية

larger و smaller.

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

القيمة `<length>`

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

القيمة `<percentage>`

نسبة مئوية من حجم الخط للعنصر الأب.

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

البنية الرسمية

font-size: <absolute-size> | <relative-size> | <length-percentage>;

حيث:

<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large
<relative-size> = larger | smaller
<length-percentage> = <length> | <percentage>

نُهج الاستخدام

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

الكلمات المحجوزة

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

البكسلات

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

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

واحدة `em`

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

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

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

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

من المهم جدًا ملاحظة كيف تتراكم قيمة الواحدة em، فخذ شيفرة HTML الآتية:

<span>Outer <span>inner</span> outer</span>

وشيفرة CSS:

span { 
  font-size: 1.6em; 
}

لاحظ الناتج:

Outer inner outer

بفرض أنَّ حجم الخط font-size الافتراضي في المتصفح هو 16px، فالكلمتين outer في المثال السابق سيكون حجمهما هو 1.6×16 = 25.6px، بينما ستُعرَض الكلمة inner بحجم 40.96px، لأنَّ حجم الخط لعنصر <span> الداخلي هو 1.6em نسبةً إلى حجم الخط للعنصر الأب، الذي بدوره هو 1.6em نسبةً إلى حجم الخط للعنصر الأب ...إلخ. يسمى هذا التأثير بالتراكم.

واحدة `rem`

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

شيفرة CSS الآتية مماثلة تمامًا لشيفرة CSS في القسم السابق، باستثناء تحويل الواحدة إلى rem بدلًا من em:

span {
  font-size: 1.6rem;
}

سنُطبِّق القاعدة السابقة على شيفرة HTML الآتية:

<span>Outer <span>inner</span> outer</span>

تجربة حيّة:

Outer inner outer

لاحظ كيف عُرِضَت جميع الكلمات بنفس حجم الخط (25.6px، بفرض أنَّ حجم الخط الافتراضي للمتصفح هو 16px).

مصادر ومواصفات

مواصفة CSS Fonts Module Level 3.
مسودة CSS Transitions.
مواصفة ‎CSS Level 2 (Revision 1)‎.
مواصفة CSS Level 1.

@@ سطر 209: / سطر 209: @@
 * مواصفة [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]]
+[[تصنيف:CSS|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Property]]
+[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Font]]
+[[تصنيف:CSS Font|{{SUBPAGENAME}}]]

مراجعة 15:34، 28 يناير 2018

أمثلة

دعم المتصفحات

البنية العامة

الكلمات المحجوزة

الحجوم المطلقة

الحجوم النسبية

القيمة <length>

القيمة <percentage>

البنية الرسمية

نُهج الاستخدام

الكلمات المحجوزة

البكسلات

واحدة em

واحدة rem

مصادر ومواصفات

القيمة `<length>`

القيمة `<percentage>`

واحدة `em`

واحدة `rem`