CSS/font-family

الخاصية font-family في CSS تُحدِّد قائمةً تحتوي على نوع خط واحد أو أكثر من أنواع الخطوط الخاصة أو العامة، وذلك لتُطبَّق على العنصر.

بطاقة الخاصية

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

/* نوع خطوط خاص ثم نوع خطوط عام */
font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/* أنواع الخطوط العامة فقط */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;

/* القيم العامة */
font-family: inherit;
font-family: initial;
font-family: unset;

يُفصَل بين قيم هذه الخاصية بفواصل للإشارة إلى أنها بدائل، فسيختار المتصفح أوّل خط في القائمة التي يكون مثبتًا على نظام تشغيل الزائر أو يمكن تنزيله باستخدام قاعدة ‎@font-face.

من المناسب في أغلبية الحالات استخدام الخاصية المختصرة font لضبط قيمة الخاصية font-family وغيرها من الخاصيات المتعلقة بالخطوط.

من المستحسن أن توفِّر نوع خطوط عام في قائمة الخطوط المضبوطة عبر هذه الخاصية، لأنه لا توجد ضمانة أنَّ أحد الخطوط متوافرة دومًا على أجهزة العملاء، ولهذا يجب ترك المجال مفتوحًا أمام المتصفح لاختيار خط بديل عند الحاجة.

لاحظ أنَّ الخاصية font-family تُحدِّد قائمة من أنواع الخطوط وتبدأ من أعلاها أولويةً إلى أدناها أولويةً، لكن اختيار الخطوط لا يتوقف عند أوّل خط في القائمة (وبالتالي سيُطبَّق على كل النصوص)، وإنما ستتم هذه العملية على كل محرف على حدة، أي لو لم يحتوِ نوع الخط على الصورة الرمزية لأحد المحارف (glyph) فسيُجرِّب المتصفح الخطوط الأخرى (أي لو كان أوّل خط لا يحتوي على المحارف العربية، فسيُستعمَل على المحارف اللاتينية فقط، وسيجرب المتصفح الخطوط التي تليه في الأولوية لإظهار المحارف العربية). لاحظ أنَّه عندما يتوافر خطٌ بحجم معيّن (size) أو شكل معيّن (style) فقط فقد تؤثر بقية خاصيات الخط على نوع الخط المُختار.

أمثلة

أمثلة عن أشهر الخطوط في كل تصنيف من تصنيفات الخطوط:

.serif {
  font-family: Times, Times New Roman, Georgia, serif;
}

.sansserif {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.monospace {
  font-family: Lucida Console, Courier, monospace;
}

.cursive {
  font-family: cursive;
}

.fantasy {
  font-family: fantasy;
}

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	3.0	3.5	1.0
system-ui	56	غير مدعومة	غير مدعومة	43	؟

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

تُحدِّد الخاصية font-family قائمةً بأنواع الخطوط التي يُفصل بينها بفاصلة، وكل خط يكون إما <family-name> (اسم لنوع خط خاص) أو <generic-name> (اسم لنوع خط عام).

<family-name>

اسم نوع الخط، مثل «Times» و «Helvetica»؛ لاحظ أنَّ أسماء أنواع الخطوط التي تحتوي على فراغات يجب أن تُحاط بعلامتَي اقتباس (أي أنها ستصبح سلاسل نصية <string>، أما إذا لم تحتوِ على فراغات فيمكن عدّها على أنها من نوع البيانات <custom-ident>).

<generic-name>

أنواع الخطوط العامة تستعمل كآلية لاختيار بديل إذا لم يكن نوع الخط المُحدَّد موجودًا، وأسماء أنواع الخطوط العامة هي كلمات محجوزة لا يجوز أن تُحاط بعلامات اقتباس، ويجب أن يكون نوع الخط العام هو آخر عنصر في قائمة أنواع الخط المستخدمة.

serif

الخطوط المذيّلة (serif) التي لها إضافات صغيرة في نهايتها؛ مثل خطوط Lucida Bright و Lucida Fax و Palatino.

sans-serif

الخطوط غير المذيّلة (sans-serif) التي ليس إضافات صغيرة في نهايتها؛ مثل خطوط Open Sans و Lucida Sans و Liberation Sans.

monospace

الخطوط ثابتة العرض (monospace) التي يكون لجميع محارفها العرض نفسه؛ مثل خطوط DejaVu Sans Mono و Liberation Mono و Lucida Console.

cursive

الخطوط التي تملك محارفها أماكن لوصلها مع المحارف الأخرى، لتبدو الكتابة وكأنها موصولة مع بعضها (كما في الكتابة بخط اليد)؛ مثل خطوط Brush Script MT و Lucida Calligraphy و Lucida Handwriting.

fantasy

خطوط fantasy هي الخطوط التزينية؛ مثل خطوط Papyrus و Herculanum و Harrington.

system-ui

ستؤخذ الصور الرمزية للمحارف من خط الواجهة الافتراضي في نظام التشغيل الذي يستعمله الزائر.

أسماء أنواع الخطوط الصالحة

يجب أن تكون أسماء أنواع الخطوط إما سلاسل نصية محاطة بعلامات اقتباس، أو سلسلة نصية غير مٌقتبَسة تُمثِّل مُعرِّفًا (identifier) أو أكثر، وهذا يعني أنَّ علامات الترقيم والأرقام في بداية كل مُعرِّف يجب تهريبها (escape) إن لم يكن اسم الخط مقتبسًا.

هذا مثال عن تعريف الخطوط بطريقة صحيحة:

font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

أما هذه الأمثلة فهي غير صحيحة:

font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

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

font-family: [ <family-name> | <generic-family> ]#;

يمكن تكرار القيم لتحديد أكثر من نوع خط، وذلك بفصل القيم بفاصلة.

<family-name> = <string> | <custom-ident>+
<generic-family> = serif | sans-serif | cursive | fantasy | monospace

انظر أيضًا

• صفحة الخاصية font التي تؤدي إلى ضبط قيم الخاصيات الفرعية font-style و font-weight و font-size و line-height وذلك لتحديد الخط المستخدم في العنصر.
• صفحة الخاصية color التي تضبط القيمة اللونية للعناصر.

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

• مسودة CSS Fonts Module Level 4، أضافت هذه المواصفة أنواع خطوط عامة جديدة مثل system-ui و emoji و math و fangsong.
• مواصفة CSS Fonts Module Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.