خصائص CSS الخط تحدد عائلة الخط والجرأة، الحجم، وأسلوب النص.
الفرق بين خطوط الرقيق وبلا الرقيق
عائلات CSS الخط
في CSS، هناك نوعان من أسماء عائلة الخط:
- عائلة العامة - مجموعة من العائلات الخط مع نظرة مماثلة (مثل "شريف" أو "أحادي المسافة")
- عائلة الخط - عائلة خط معين (مثل "تايمز الرومانية الجديدة" أو "ارييل")
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia |
Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana |
"Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console |
All monospace characters have the same width |
 | ملاحظة: في شاشات الكمبيوتر، وتعتبر الخطوط بلا الرقيق أسهل في القراءة من الخطوط الرقيق. |
|---|
خط العائلة
تم تعيين عائلة الخط للنص مع font-family الملكية.
على font-family ينبغي أن تعقد الملكية عدة أسماء الخط بأنه "تراجع" النظام. إذا كان المتصفح لا يدعم الخط الأول، فإنه يحاول أن الخط القادم، وهلم جرا.
تبدأ مع الخط الذي تريده، وتنتهي مع عائلة العامة، للسماح للمتصفح اختيار خط مماثل في الأسرة عامة، إذا لم الخطوط الأخرى المتاحة.
ملاحظة: إذا كان اسم عائلة الخط هو أكثر من كلمة واحدة، يجب أن يكون في علامات اقتباس، مثل: "تايمز الرومانية الجديدة".
يتم تحديد عائلة الخط أكثر من واحد في قائمة مفصولة بفواصل:
عن دمج الخطوط المستخدمة عادة، ننظر في الويب الآمن دمج الخط .
نوع الخط
و font-style يستخدم خاصية معظمها لتحديد النص مائل.
هذه الخاصية لديه ثلاث قيم:
- سوف يتم عرض النص بشكل طبيعي - طبيعي
- مائل - ويرد نص بخط مائل
- منحرف - النص هو "يميل" (منحرف هي مشابهة جدا لالمائل، ولكن أقل معتمدة)
مثال
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
} انها محاولة لنفسك » حجم الخط
و font-size الملكية يحدد حجم النص.
أن تكون قادرة على إدارة حجم النص المهم في تصميم مواقع الإنترنت. ومع ذلك، يجب عدم استخدام تعديلات حجم الخط لجعل الفقرات تبدو العناوين، أو عناوين تبدو الفقرات.
دائما استخدام علامات HTML المناسبة، مثل <H1> - <H6> للعناوين و<p> وللفقرات.
يمكن أن يكون قيمة حجم الخط والحجم المطلق، أو نسبي.
الحجم المطلق:
- يحدد النص إلى الحجم المحدد
- لا يسمح للمستخدم لتغيير حجم النص في جميع المتصفحات (سيئة لأسباب الوصول)
- الحجم المطلق هو مفيد عندما يعرف حجم الفعلي للناتج
الحجم النسبي:
- يحدد حجم بالنسبة إلى العناصر المحيطة
- يسمح للمستخدم لتغيير حجم النص في المتصفحات
| ملاحظة: إذا لم تقم بتحديد حجم الخط والحجم الافتراضي للنص العادي، مثل الفقرات، هو 16px (16px = 1em). |
|---|
تعيين حجم الخط مع بكسل
تحديد حجم النص مع بكسل تمنحك السيطرة الكاملة على حجم النص:
نصيحة: إذا كنت تستخدم بكسل، لا يزال بإمكانك استخدام أداة التكبير لتغيير حجم الصفحة بأكملها.
تعيين حجم الخط مع إم
للسماح للمستخدمين تغيير حجم النص (في قائمة المتصفح)، العديد من المطورين استخدام م بدلا من بكسل.
وأوصت وحدة حجم م من قبل W3C.
1em يساوي حجم الخط الحالي. حجم النص الافتراضي في المستعرضات هو 16px. لذا، فإن الحجم الافتراضي 1em هو 16px.
يمكن حساب حجم من بكسل لم باستخدام هذه الصيغة:بكسل/ 16 =م
مثال
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
} انها محاولة لنفسك » في المثال أعلاه، فإن حجم النص في طب الطوارئ هو نفس المثال السابق في بكسل. ومع ذلك، مع حجم م، فمن الممكن لضبط حجم النص في جميع المتصفحات.
للأسف، لا تزال هناك مشكلة مع الإصدارات القديمة من إنترنت إكسبلورر. يصبح النص أكبر مما يجب عندما تقدم أكبر، وأصغر مما ينبغي عندما جعل أصغر.
استخدام مزيج من نسبة وإم
الحل الذي يعمل في جميع المتصفحات، هو تحديد حجم الخط الافتراضي في المئة لل<BODY> العنصر:
مثال
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
} انها محاولة لنفسك » نظامنا يعمل الآن كبير! فإنه يدل على نفس حجم النص في جميع المتصفحات، ويتيح لجميع المتصفحات لتكبير أو تغيير حجم النص!
الوزن الخط
على font-weight تحدد الخاصية وزن الخط:
الخط البديل
و font-variant تحدد الخاصية أم لا يجب أن يتم عرض النص في الخط قبعات صغيرة.
في خط قبعات صغيرة، يتم تحويل كافة الأحرف الصغيرة إلى أحرف كبيرة. ومع ذلك، تظهر الأحرف الكبيرة المحولة في حجم الخط أصغر من الأحرف الكبيرة الأصلية في النص.
المزيد من الأمثلة
كل خصائص الخط في إعلان واحد
يوضح هذا المثال كيفية استخدام الخاصية المختصرة لوضع كل من خصائص الخط في إعلان واحد.
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »
جميع خصائص CSS الخط
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |