CSS Academy · درس

عائلة الخطوط والخطوط الآمنة للويب

حدّد عائلات الخطوط، وافهم الخطوط الآمنة للاستخدام عبر جميع المتصفحات.

عائلة الخطوط والخطوط الآمنة للويب درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

خاصية font-family

تحدّد الخاصية font-family نوع الخط للعنصر. وتقدمون مجموعة خطوط: قائمة بأسماء الخطوط مفصولة بفواصل، مرتبة من الأكثر تفضيلًا إلى الأقل تفضيلًا، وتنتهي بعائلة خطوط عامة.

<p>This text renders in the page's body font stack.</p>

عائلات الخطوط العامة

يعرّف CSS خمس عائلات عامة لاستخدامها كخطوط احتياطية:

serif — خطوط ذات امتدادات زخرفية (Times وGeorgia)
sans-serif — خطوط واضحة من دون امتدادات (Arial وHelvetica)
monospace — خطوط ذات عرض ثابت (Courier وConsolas)
cursive — خطوط تشبه الكتابة اليدوية
fantasy — خطوط عرض زخرفية

الخطوط الآمنة للويب

الخطوط الآمنة للويب مثبتة مسبقًا في جميع أنظمة التشغيل تقريبًا. ويمكنكم الاعتماد عليها من دون تحميل ملف خط خارجي:

Sans-serif: Arial وHelvetica وVerdana وTrebuchet MS
Serif: Georgia وTimes New Roman
Monospace: Courier New وConsolas

أسماء الخطوط التي تحتوي على مسافات

يجب وضع أسماء الخطوط التي تحتوي على مسافات بين علامتي اقتباس:

<p class="serif-example">"Times New Roman", Times, serif</p>
<p class="sans-example">"Open Sans", sans-serif</p>

أفضل ممارسة لمجموعات الخطوط

أنشئوا مجموعة الخطوط باتباع الترتيب التالي:

الخط المفضل لديكم (قد لا يكون مثبتًا)
خط احتياطي مشابه أو خطان احتياطيان مشابهـان
عائلة خطوط عامة كخيار أخير

<p class="font-stack">Georgia &rarr; Palatino Linotype &rarr; serif fallback</p>

خطوط واجهة النظام

تستخدم التصميمات الحديثة غالبًا خطوط النظام، أي خط واجهة المستخدم الأصلي لنظام التشغيل. ويمنح ذلك مظهرًا أصليًا ويتطلب تنزيلًا بحجم صفر:

<p class="system-ui-text">This uses your OS's native UI font.</p>

مجموعات الخطوط أحادية المسافة للبرمجة

تحتاج محررات الأكواد والطرفيات إلى مجموعة خطوط أحادية المسافة:

<p>Inline <code>const x = 1;</code> code.</p>
<pre>function hello() {
  return "world";
}</pre>

توريث font-family

ترث معظم العناصر font-family من العنصر الأب. لكن بعض عناصر النماذج (<input> و<textarea>) لا ترثها افتراضيًا في بعض المتصفحات، لذا اضبطوها صراحةً:

<input type="text" placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
<select><option>Select</option></select>
<button>Button</button>

التحقق من الخطوط المتاحة

يمكنكم التحقق من توفر خط في النظام باستخدام الدالة local() داخل @font-face. ويحاول المتصفح استخدام الخط المحلي أولًا قبل تنزيله.

<p class="my-font-text">Text using MyFont (local match or fallback)</p>

تقسيم الخطوط حسب نطاق Unicode

عند تحميل الخطوط، استخدموا unicode-range في @font-face لتحميل نطاقات الأحرف التي تحتاجون إليها فقط، مما يقلل حجم التنزيل للمواقع متعددة اللغات.

<p class="inter-text">Basic Latin text (U+0000&ndash;00FF range)</p>

نظرة عامة على الخطوط المتغيرة

تحتوي الخطوط المتغيرة على عائلة كاملة (الأوزان والعروض والأنماط) في ملف واحد باستخدام محاور تنويع الخط. وهي تقلل طلبات HTTP بدرجة كبيرة في التصميمات الغنية بالطباعة.

تحقق سريع

أي عائلة خطوط عامة ينبغي استخدامها كخط احتياطي نهائي لمجموعة خطوط sans-serif؟

مراجعة

تأخذ الخاصية font-family مجموعة خطوط تنتهي بعائلة خطوط عامة. وتعمل الخطوط الآمنة للويب في كل مكان من دون تحميل. وتمنح مجموعات خطوط واجهة النظام مظهرًا أصليًا من دون أي تكلفة HTTP. ضعوا أسماء الخطوط التي تحتوي على مسافات بين علامتي اقتباس دائمًا.

الأسئلة الشائعة

هل درس «عائلة الخطوط والخطوط الآمنة للويب» مجاني؟

نعم — نص درس «عائلة الخطوط والخطوط الآمنة للويب» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «عائلة الخطوط والخطوط الآمنة للويب»؟

حدّد عائلات الخطوط، وافهم الخطوط الآمنة للاستخدام عبر جميع المتصفحات. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «عائلة الخطوط والخطوط الآمنة للويب»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy