الخاصية font
الخاصية font في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات font-style و font-variant و font-weight و font-size و line-height و font-family، وذلك لتحديد الخط المستخدم في العنصر.
/* size | family */
font: 2em "Open Sans", sans-serif;
/* style | size | family */
font: italic 2em "Open Sans", sans-serif;
/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;
/* style | variant | weight | stretch | size/line-height | family */
font: italic small-caps bolder condensed 16px/3 cursive;
/* الخط المستخدم في نظام التشغيل */
font: message-box;
font: icon;
/* القيم العامة */
font: inherit;
font: initial;
font: unset;
وكما في جميع الخاصيات المختصرة، تقوم الخاصية font بضبط قيم جميع الخاصيات التي تستطيع ضبطها، حتى لو لم نُحدِّد قيمةً لتلك الخاصيات، لأنها ستضبطها إلى قيمها الابتدائية. لاحظ أنَّ الخاصيات font-stretch و font-size-adjust و font-kerning لن تُضبَط عبر الخاصية المختصرة font لكنها ستؤدي إلى إعادة ضبط قيمها إلى القيم الابتدائية.
| القيمة الابتدائية | لكل قيمة مختصرة:
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | نعم |
| قابلة للتحريك | انظر صفحات الخاصيات التي تختصرها هذه الخاصية. |
| القيمة المحسوبة | لكل قيمة مختصرة:
|
أمثلة
ضبط حجم الخط (font-size) إلى 12px وارتفاع الخط (line-height) إلى 14px، وضبط نوع الخط (font-family) إلى sans-serif:
p { font: 12px/14px sans-serif; }
ضبط حجم الخط (font-size) إلى 80% من حجم الخط للعنصر الأب (أو القيمة الافتراضية إن لم يكن هنالك عنصر أب)، وضبط نوع الخط (font-family) إلى sans-serif:
p { font: 80% sans-serif; }
ضبط «وزن الخط» (font-weight) إلى bold (عريض)، وشكل الخط (font-style) إلى italic (مائل)، وحجم الخط (font-size) إلى large (كبير)، ونوع الخط (font-family) إلى serif:
p { font: bold italic large serif; }
ضبط خط العنصر إلى ما يماثل خط شريط الحالة المستخدم في نظام التشغيل:
p { font: status-bar; }
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 3.0 | 3.5 | 1.0 |
| خطوط النظام | 1.0 | 1.0 | 4.0 | 6.0 | 1.0 |
| ضبط قيمة font-stretch | مدعومة | 43 | ؟ | ؟ | ؟ |
البنية العامة
يمكن تحديد قيمة الخاصية font ككلمة محجوزة، التي ستختار خطًا من الخطوط التي يستعملها النظام، أو كخاصية مختصرة لعدد من الخاصيات المتعلقة بالخطوط.
إذا حُدِّدت قيمة الخاصية font ككلمة محجوزة، فيجب أن تكون إحدى القيم الآتية: caption أو icon أو menu أو message-box أو small-caption أو status-bar.
أما إذا اُستعملت الخاصية font كخاصية مختصرة لضبط عدِّة قيم متعلقة بالخطوط:
- فيجب أن تتضمن القيمتين:
<font-size><font-family>
- ويمكن أن تتضمن اختياريًا القيم:
<font-style><font-variant><font-weight><line-height>
- يجب أن تسبِق قيم الخاصيات
font-styleوfont-variantوfont-weightالخاصيةfont-size. - يمكن أن تقبل قيمة الخاصية
font-variantالكلمات المحجوزة المُعرَّفة في مواصفة CSS 2.1 فقط، وهيnormalوsmall-caps. - يجب أن تُحدَّد قيمة
line-heightبعد قيمةfont-sizeمباشرةً، وتكون مسبوقةً بخط مائل/، كما يلي:16px/3. - يجب أن تكون قيمة
font-familyهي آخر قيمة مُحدَّدة.
<font-style>
راجع صفحة الخاصية font-style.
<font-variant>
راجع صفحة الخاصية font-variant.
<font-weight>
راجع صفحة الخاصية font-weight.
<font-stretch>
راجع صفحة الخاصية font-stretch.
<font-size>
راجع صفحة الخاصية font-size.
<font-height>
راجع صفحة الخاصية font-height.
<font-family>
راجع صفحة الخاصية font-family.
caption
الخط المستخدم في نظام التشغيل لعرض لافتات عناصر التحكم (مثل الأزرار والقوائم المنسدلة ...إلخ.)
icon
الخط المستخدم في نظام التشغيل لعرض لافتات الأيقونات.
الخط المستخدم في نظام التشغيل لعرض عناصر التحكم (مثل الأزرار والقوائم المنسدلة ...إلخ.)
message-box
الخط المستخدم في نظام التشغيل لعرض مربعات الحوار.
small-caption
الخط المستخدم في نظام التشغيل لعرض لافتات عناصر التحكم الصغيرة.
status-bar
الخط المستخدم في نظام التشغيل لعرض شريك الحالة في أسفل النوافذ.
البنية الرسمية
font: [ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar;
حيث:
<font-variant-css21> = [ normal | small-caps ]
انظر أيضًا
- صفحات الخاصيات الفرعية من الخاصية font وهي:
font-styleوfont-weightوfont-sizeوline-height. - صفحة الخاصية
colorالتي تضبط القيمة اللونية للعناصر.
مصادر ومواصفات
- مواصفة CSS Fonts Module Level 3، أضافت هذه المواصفة دعمًا لضبط قيمة الخاصية
font-stretch. - مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.