عائلة الخطوط (HTML)

يُحدد اختيار عائلة الخط في (X) HTML و CSS والأنظمة المشتقة منها قائمةً بالخطوط ذات الأولوية وأسماء العائلات العامة؛ وبالاقتران مع خصائص الخط ذات الصلة، تُحدد هذه القائمة نوع الخط المستخدم لعرض الأحرف. يتوفر اختيار عائلة الخط بصيغتين: في عنصر (X)HTML المهمل مع سمته، وفي خاصية CSS.<font>...</font>facefont-family

يُقابل مصطلح " عائلة الخط" في لغة CSS مصطلح " نمط الخط" في علم الطباعة ، وهو عبارة عن مجموعة من الخطوط تُحدد بأنماط تصميم مشتركة. الخط هو مجموعة محددة من الرموز (أشكال الأحرف)، ويتميز عن غيره من الخطوط في نفس العائلة بخصائص إضافية مثل سُمك الخط، وميله، وعرضه النسبي، وما إلى ذلك. يُقابل مصطلح "نمط الخط " في لغة CSS مصطلح "الخط"؛ ويُحدد ذلك من خلال مزيج من عائلة الخط والخصائص الإضافية.

في كلٍ من HTML وCSS، تُفصل قائمة الخطوط بفواصل. ولتجنب النتائج غير المتوقعة، يجب أن تكون عائلة الخط الأخيرة في القائمة من بين العائلات العامة المتاحة افتراضيًا. في حال عدم العثور على خط، سيستخدم متصفح الويب خطه الافتراضي، والذي قد يكون خطًا مُحددًا من قِبل المستخدم. وبحسب المتصفح، يُمكن للمستخدم تجاوز الخط المُحدد من قِبل مُبرمج الكود. قد يكون ذلك لأسباب تتعلق بالذوق الشخصي، أو بسبب قيود مادية، كالحاجة إلى حجم خط أكبر أو تجنب ألوان مُعينة.

بالإضافة إلى الخطوط المحلية، تدعم متصفحات الويب الحديثة ربط ملفات الخطوط المخصصة مباشرةً باستخدام @font-faceالتصريح. وبمجرد تضمينها، يمكن إدراج هذه الخطوط في font-familyالخاصية، إلى جانب جميع الخطوط المحلية والاحتياطية.

يُعرّف المثال التالي نفس نوع الخط ( Times أو خط serif افتراضي ، 14 نقطة، مائل) بثلاث طرق:

• باستخدام CSS في ورقة أنماط منفصلة.
• باستخدام CSS المضمن المطبق على عنصر عبر styleالسمة.
• مع عنصر العرض المهمل وسمته غير القياسية . ( ليس مهملاً بشكل عام، ولكن استخدامه في العرض مهمل.)<font>...</font>face<i>...</i>

.text { font-family : times , serif ; font -size : 14 pt ; font-style : italic ; }

< p class = "text" > نص نموذجي منسق باستخدام CSS في ورقة أنماط منفصلة. </p>​​< p style = "font-family: times, serif; font-size:14pt; font-style:italic" > نص تجريبي منسق باستخدام CSS مضمن. </p>​​<p> <i> < font face = "times, serif" size = " 3 " > نص نموذجي منسق باستخدام علامة FONT المهملة. </font> </i> </p>​​​​

من أفضل الممارسات وضع مسافة بعد الفاصلة، ووضع أي اسم يحتوي على مسافات بين علامتي اقتباس.

على الرغم من أن لغة CSS تحاول تعريف عائلة الخطوط بنفس طريقة تعريف نمط الخط، إلا أن font-familyالمدخل وسابقه غير القياسي في HTML استُخدما تاريخيًا لتحديد نمط الخط المحدد . ويعود هذا الاستخدام إلى أن ملفات الخطوط لم تكن تُعرّف نفسها كجزء من عائلة خطوط، ويرجع ذلك جزئيًا إلى أن عددًا قليلًا من المحررات في ذلك الوقت كان يدعم الاختيار بين أكثر من أربعة أنماط خطوط (غامق/عادي ومائل/عادي).

ونتيجة لذلك، كان من الشائع رؤية تعريفات مثل هذه font-family: 'Gill Sans Extrabold', 'Heisei Mincho W9'بدلاً من التعريف الصحيح من الناحية الفنية font-family: 'Gill Sans', 'Heisei Mincho'; font-weight: 900. لا يدعم كل من CSS2 وCSS3 هذا الاستخدام (فهي غير موجودة في الأمثلة)، ولكن معظم المتصفحات تقبلها على أنها "أسماء" صالحة مع ذلك.

يمكن لعائلة الخطوط استخدام خط مُسمى مُحدد (مثل Heisei Mincho W9 )، لكن النتيجة تعتمد على الخطوط المُثبتة على جهاز المستخدم. سيختلف المظهر الفعلي حسب المتصفح والخطوط المُثبتة على النظام. ^{[ 1 ]} على سبيل المثال ، عند تثبيت Firefox افتراضيًا على نظام Microsoft Windows ، سيظهر الخط ذو الزوائد كـ Times New Roman ، والخط بدون زوائد كـ Arial .

عادة ما تكون مجموعة فرعية صغيرة فقط منها، وهي بشكل رئيسي Serif و Sans-serif و Monospace و Cursive ^{[ 2 ]} قابلة للتكوين بسهولة من قبل المستخدم في متصفحات الويب.

تُجري العديد من الأنظمة أيضًا استبدالًا خاصًا للخطوط لاستبدال عائلات الخطوط "المعروفة" المفقودة ببدائل متوافقة مع المقاييس . على سبيل المثال، يستبدل نظام ويندوز خط هيلفيتيكا بخط أريال، وخط تايمز بخط تايمز نيو رومان. ^{[ 3 ]} هذه العائلات ليست عامة بالمعنى المتعارف عليه في لغة CSS، ولا يتم التعامل معها عادةً على مستوى المتصفح.

• الخطوط الأساسية للويب
• قائمة أنواع الخطوط
• ترميز العرض التقديمي
• الطباعة على الويب