قمت بكتابة هذا الدرس منذ مدة في المشروع و أريد اعادة نشره في مدونتي
أترككم مع الدرس
أخي المطور..
إن من أهم الأمور التي تضفي على موقعك أو برنامجك جمالاً هي تنظيم النص و سهولة قراءته، واليوم.. سأتحدث عن كيفية التحكم بالخط بالـ css وسأشرح لك أشهر أوامره
1- نوع الخط
بإمكانك التحكم بنوع الخط بواسطة القيمة font-family ..
مثال:
body { font-family: Arial, Helvetica, Tahoma; }
2- قياس الخط
بإمكانك التحكم بقياس الخط بواسطة القيمة font-size ..
وهناك عدّة طرق للتحكم بقياس الخط، أذكر منها طريقة الكتابة، والتي تحتوي على عدّة قيم..
مثال على جميع القيم :
body {
font-size: xx-small;
font-size: x-small;
font-size: smaller;
font-size: small;
font-size: medium;
font-size: large;
font-size: larger;
font-size: x-large;
font-size: xx-large;
}
3- شكل الخط
بإمكانك التحكم بشكل الخط بواسطة القيمة font-style ..
وله 3 أنواع من القيم هي:
* normal : وهذا لجعل شكل الخط عادي كما هو
* italic : وهذا لجعل الخط مائلاً
* oblique : وهذا لجعل الخط مائلاً أيضاً
مثال على جميع القيم :
body {
font-style: normal;
font-style: italic;
font-style: oblique;
}
4- لون الخط
بإمكانك التحكم بلون الخط بواسطة القيمة color ..
وهناك طرقتان للتحكم بلون الخط:
* بالإسم : بحيث تكتب اسم اللون
* بالرمز : بحيث تكتب رمز اللون
مثال على القيمتين :
body {
color: green;
color: #00FF00;
}
5- التباعد بين الأحرف
بإمكانك التحكم بتباعد الأحرف عن بعضها بواسطة القيمة letter-spacing ..
مثال :
body { letter-spacing: 1em; }
6- المسافة بين الكلمات
بإمكانك التحكم بالمسافة بين الكلمات بواسطة القيمة word-spacing ..
مثال :
body { word-spacing: 5em; }
7- تزيين الخط
بإمكانك التحكم بزينة الخط بواسطة القيمة text-decoration ..
وله 5 أنواع من القيم هي:
* none : وهذا لجعل الخط عادي كما هو
* underline : وهذا لإضافة خط أسفل الكلمة
* overline : وهذا لإضافة خط أعلى الكلمة
* line through : وهذا لإضافة خط على الكلمة
* blink : وهذا لجعل الخط يومض (يظهر ويختفي)
مثال على جميع القيم :
body {
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;
}
و هذا مثال عن كل هذه الخصائص
http://www.almashroo.com/articles/examples/css/font1/example.html
ويمكنك تحميل الملف من هنا
هذه هي أشهر خصائص الخط في css
