مثال
تحديد كافة خصائص الخط في إعلان واحد:
p.ex1
{
font: 15px arial, sans-serif;
}
p.ex2
{
font: italic bold 12px/30px Georgia, serif;
}
انها محاولة لنفسك » أكثر "Try it Yourself" الأمثلة أدناه.
تعريف واستخدام
والخاصية المختصرة الخط يحدد كل خصائص الخط في إعلان واحد.
الخصائص التي يمكن تعيينها، هي (in order) : "font-style font-variant font-weight font-size/line-height font-family"
ويطلب من قيم وحجم الخط والخط بين أفراد الأسرة. إذا كان أحد من القيم الأخرى مفقودة، سيتم إدراج القيم الافتراضية، إن وجدت.
Note: الخاصية خط الطول يحدد المسافة بين السطور.
| القيمة الافتراضية: | The default value of all the font properties |
|---|---|
| وارث: | yes |
| Animatable: | yes, see individual properties . Read about animatable Try it |
| الإصدار: | CSS1 |
| جافا سكريبت بناء الجملة: | object .style.font="italic small-caps bold 12px arial,sans-serif" Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
| خاصية | |||||
|---|---|---|---|---|---|
| font | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
ملاحظة: انظر دعم المتصفح الفردية لكل قيمة أقل.
CSS بناء الجملة
font:font-stylefont-variantfont-weightfont-size/line-height
font-family |caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;قيم الملكية
| الملكية / القيمة | وصف |
|---|---|
| font-style | يحدد نمط الخط. القيمة الافتراضية هي "normal" . انظر على غرار الخط للقيم المحتملة |
| font-variant | يحدد البديل الخط. القيمة الافتراضية هي "normal" . رؤية الخط المتغير للقيم المحتملة |
| font-weight | يحدد الوزن الخط. القيمة الافتراضية هي "normal" . رؤية الخط الوزن عن القيم الممكنة |
| font-size/line-height | يحدد حجم الخط والخط الارتفاع. القيمة الافتراضية هي "normal" . انظر حجم الخط و خط الطول عن القيم الممكنة |
| font-family | يحدد عائلة الخط. تعتمد القيمة الافتراضية على المتصفح. رؤية الخط بين أفراد الأسرة للقيم المحتملة |
| caption | يستخدم الخط التي يستخدمها الضوابط علق (مثل الأزرار، وانخفاض في قيمة الموجودات، وما إلى ذلك) |
| icon | يستخدم الخط الذي يتم استخدامها من قبل تسميات الرموز |
| menu | يستخدم الخطوط التي يتم استخدامها من قبل القوائم المنسدلة |
| message-box | يستخدم الخطوط التي يتم استخدامها من قبل مربعات الحوار |
| small-caption | وهناك نسخة أصغر من الخط التعليق |
| status-bar | يستخدم الخطوط التي يتم استخدامها من قبل شريط الحالة |
| initial | تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي |
| inherit | يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة |
مزيد من الأمثلة
مثال
مظاهرة لبعض قيم الخاصية الخط أخرى.
<p style="font:caption">The browser font used in captioned controls.</p>
<p style="font:icon">The browser font used in icon labels.</p>
<p
style="font:menu">The browser font used in dropdown menus.</p>
<p
style="font:message-box">The browser font used in dialog boxes.</p>
<p
style="font:small-caption">A smaller version of the caption font.</p>
<p
style="font:status-bar">The browser font used in the status bar.</p> انها محاولة لنفسك » صفحات ذات صلة
درس CSS: CSS الخط
HTML DOM المرجع font property