CSS/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-style: normal font-variant: normal font-weight: normal font-stretch: normal font-size: medium line-height: normal font-family: تعتمد على المتصفح.
تُطبَّق على	جميع العناصر.
قابلة للوراثة	نعم
قابلة للتحريك	انظر صفحات الخاصيات التي تختصرها هذه الخاصية.
القيمة المحسوبة	لكل قيمة مختصرة: font-style: كما حُدِّدَت. font-variant: كما حُدِّدَت. font-weight: الكلمة المحجوزة أو القيمة الرقمية كما حُدِّدَت، ما عدا bolder و lighter إذ تحولان إلى القيم الحقيقة. font-stretch: كما حُدِّدَت. font-size: كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى أطوال مطلقة. line-height: كما حُدِّدت، ما عدا القيم النسبية التي ستحوّل إلى أطوال مطلقة. font-family: كما حُدِّدَت.

أمثلة

ضبط حجم الخط (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

الخط المستخدم في نظام التشغيل لعرض لافتات الأيقونات.

menu

الخط المستخدم في نظام التشغيل لعرض عناصر التحكم (مثل الأزرار والقوائم المنسدلة ...إلخ.)

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.