خاصية font-family
آخر تحديث: 2026-09-13
font-family خاصية font-family
تحدد خاصية font-family في CSS قائمة ذات أولوية من أسماء عائلات الخطوط و/أو العائلات العامة للعنصر. يستخدم المتصفح أول خط متاح في القائمة، وينتقل للأسفل في السلسلة عند غياب خط ما.
| الفئة | |
|---|---|
| القيمة الأولية | depends on user agent |
| موروث | نعم |
| ينطبق على | all |
| نوع الحركة | discrete |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
font-family: [ <family-name> | <generic-family> ]#;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<family-name> | النوع | اسم عائلة خط محددة، مثل 'Microsoft YaHei' |
<generic-family> | كلمة مفتاحية | عائلة خط عامة: serif أو sans-serif أو monospace |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-family | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يجب وضع أسماء الخطوط التي تحتوي على مسافات أو أحرف خاصة بين علامتي اقتباس، مثل "Times New Roman".
مهم： أنهِ القائمة دائمًا بعائلة عامة (serif أو sans-serif أو monospace) كبديل أخير.
❓ الأسئلة الشائعة
Qما هي الخطوط التي يجب أن أستخدمها لموقع إلكتروني باللغة الصينية في CSS؟
Aسلسلة بدائل شائعة عبر المنصات هي "PingFang SC"، "Microsoft YaHei"، sans-serif؛ ويمكنك للإنجليزية إضافة Helvetica أو Arial في البداية. يُستخدم Microsoft YaHei على Windows وPingFang SC على macOS، ويتيح sans-serif العام في النهاية عرض النص على أي نظام.
Qكيف أحمّل خط ويب مخصصًا باستخدام قاعدة @font-face في CSS؟
Aأعلن عن الخط أولًا باستخدام @font-face، مثال: @font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'); }، ثم أدرج 'MyFont' في قائمة font-family. تفضّل صيغة woff2 لحجم ملف أصغر، واحتفظ بعائلة عامة في نهاية القائمة كبديل.
Qهل يؤثر ترتيب قيم font-family المتعددة في القائمة؟
Aنعم. يتحقق المتصفح من القائمة من اليسار إلى اليمين ويستخدم أول خط مثبّت؛ ولا تُستخدم الخطوط اللاحقة إلا إذا لم تتوفر الخطوط السابقة. رتّب القائمة حسب الأفضلية، واختتم بعائلة عامة (serif أو sans-serif أو monospace) كبديل نهائي.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
