الفرق بين المراجعتين ل"CSS/font-size"
(لا فرق)
|
مراجعة 05:24، 16 يناير 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.