CSS / الخطوط (Fonts)

الناشر :كودا فوكس -

CSS / الخطوط

مفهوم الخطوط

أي نص يتم عرضه في الصفحة سواء كان عنوان، فقرة، مربع نص، زر، رابط فإنه يجب تحديد نوع و حجم الخط (Font) الخاص به حتى يظهر بشكل واضح للمستخدم و مناسب لتصميم الصفحة بشكل عام.

CSS / الخطوط


لاحظ كيف أن النص التالي يظهر بشكل سيء في البداية و لكنه في النهاية يظهر بشكل جميل لأن نوع الخط الذي استخدمناه في الأخير أفضل و أسهل في القراءة.

Fonts are important
Fonts are important
Fonts are important

في هذا الدرس ستتعلم كيف تحدد نوع و حجم الخط، كيف تستخدم خطوط جوجل، كيف تضع خطوط إحتياطية ليستعملها المتصفح إن لم يجد الخطوط الأساسية الموضوعة.

تحديد نوع الخط

لتحديد نوع الخط نستخدم الخاصية font-family و نضع إسم الخط كقيمة.

في حال استخدام خط غير موجود في جهاز المستخدم فإن المتصفح يستخدم أي خط إفتراضي متاح فيه.


في المثال التالي قمنا بجعل نص العنوان و الفقرة يظهران بالخط Tahoma.
تذكر: إن لم يكن هذا الخط متاح في جهازك فإن المتصفح سيستخدم الخط الإفتراضي.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style> 
h1, p {
    font-family: Tahoma;
}
        </style>
	</head>
	<body>
        <h1>CSS font-family</h1>
        <p>This paragraph is shown in the Tahoma font.</p>
	</body>
</html>

قواعد كتابة إسم الخط

يجب اتباع الأساليب التالية عندك كتابة أسماء الخطوط:

إذا كان إسم الخط يتألف من كلمة واحدة، يمكنك وضعه كما هو.
مثال font-family: Arial

إذا كان إسم الخط يتألف من أكثر من كلمة و بينهما شرطة فيمكنك وضعه كما هو.
مثال font-family: sans-serif

إذا كان إسم الخط يتألف من أكثر من كلمة و بينهما مسافة فارغة فيجب وضعه بين ' ' أو " ".
مثال font-family: "Courier New"

إضافة خطوط إحتياطية

بما أننا لا نضمن أن يعمل نوع الخط على جميع أجهزة المستخدمين يجب أن نضع عدة خطوط أخرى مشابهة له ليتم استخدام أحدها في حال عدم وجود الخط الأساسي في جهاز المستخدم.

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

هذا الأسلوب في تحديد الخطوط يسمى وضع خطوط إحتياطية ( Fallback Fonts ).

في المثال التالي أول خط سيجرب المتصفح استخدامه هو Tahoma، إن لم يجده سيجرب الخط Verdana الموضوع بعده، إن لم يجده سيجرب الخط sans-serif الموضوع بعده. في حال فشل في استخدام جميع الخطوط فإنه سيستخدم الخط الإفتراضي في المتصفح.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style> 
h1, p {
    font-family: Tahoma, Verdana, sans-serif;
}
        </style>
	</head>
	<body>
        <h1>CSS font fallback</h1>
        <p>This paragraph will try to use first font found in user system.</p>
        <p>You should always use some fonts as fallback.</p>
	</body>
</html>

خطوط متشابهة في الشكل

1- الخطوط التالية تنتدرج تحت مسمى serif.

font-family: "Times New Roman", Times, serif;
font-family: Georgia, serif;
font-family: Garamond, serif;

2- الخطوط التالية تنتدرج تحت مسمى sans-serif.

font-family: Arial, Helvetica, sans-serif
font-family: Tahoma, Verdana, sans-serif;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-family: Geneva, Verdana, sans-serif;

3- الخطوط التالية تنتدرج تحت مسمى monospace.

font-family: "Courier New", Courier, monospace;

4- الخطوط التالية تنتدرج تحت مسمى cursive.

font-family: "Brush Script MT", cursive;

5- الخطوط التالية تنتدرج تحت مسمى fantasy.

font-family: Copperplate, Papyrus, fantasy;

خصائص الخطوط

مهما كان نوع الخط المستخدم فإنك تستطيع تطبيق الخصائص التالية عليه.


إمالة الخط

لتحديد ما إن كان الخط سيظهر بشكل مائل أو عادي يمكنك إضافة الخاصية font-style له و تمرير إحدى القيم التالية:

القيمة معناها
italic لجعل النص يظهر بشكل مائل.
normal لجعل النص يظهر بشكل عادي.

في المثال التالي قمنا بجعل النص يظهر بشكل مائل.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style> 
* {
    font-family: Tahoma, Verdana, sans-serif;
}

.italic {
    font-style: italic;
}
        </style>
	</head>
	<body>
        <h1>CSS font-style</h1>
        <p>This paragraph is shown in normal style.</p>
        <p class="italic">This paragraph is shown in italic style.</p>
	</body>
</html>

تعريض الخط

لتحديد ما إن كان الخط سيظهر بشكل عريض أو عادي يمكنك إضافة الخاصية font-weight له و تمرير إحدى القيم التالية:

القيمة معناها
bold لجعل النص يظهر بشكل عريض.
normal لجعل النص يظهر بشكل عادي.
<number> و هنا نقصد وضع رقم يحدد درجة عرض الخط، فمثلاً حجم الخط normal يمكن كتاتبه 400 و حجم الخط bold يمكن كتابته 700.
هذا الأمر سيمر معك حين نعلمك طريقة استخدام خطوط جوجل.

في المثال التالي قمنا بجعل النص يظهر بشكل عريض.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style> 
* {
    font-family: Tahoma, Verdana, sans-serif;
}

.thick {
    font-weight: bold;
}
        </style>
	</head>
	<body>
        <h1>CSS font-weight</h1>
        <p>This paragraph is shown in normal font weight.</p>
        <p class="thick">This paragraph is shown in bold font weight.</p>
	</body>
</html>

تغيير حجم الأحرف الصغيرة

النص الذي يحتوي أحرف أجنبية مثل الأحرف الإنجليزية التي يمكن كتابتها بشكل كبير ( Capital Letters ) و بشكل صغير ( Small Letters ) يمكن جعل أحرفها الصغيرة تظهر بشكلها الكبير و لكن بحجم صغير متباين عن حجم الأحرف الكبيرة من خلال إضافة الخاصية font-variant له و تمرير إحدى القيم التالية:

القيمة معناها
small-caps لجعل الأحرف الصغيرة تظهر كالأحرف الكبيرة و لكن بحجم أصغر.
normal لجعل النص يظهر بشكل عادي.

في المثال التالي قمنا بجعل الأحرف الصغير تظهر كأحرف كبيرة و لكن بحجم أصغر.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style> 
* {
    font-family: Tahoma, Verdana, sans-serif;
}

.small-caps {
    font-variant: small-caps;
}
        </style>
	</head>
	<body>
        <h1>CSS font-variant</h1>
        <p>Harmash CSS tutorial is amazing.</p>
        <p class="small-caps">Harmash CSS tutorial is amazing.</p>
	</body>
</html>

تحديد حجم الخط

لتحديد حجم الخط نستخدم الخاصية font-size و نضع رقم بوحدة قياس معينة ليحدد حجم الخط.

الجدول التالي يوضح الفرق بين وحدات القياس التي يمكنك استخدامها لتحديد أحجام الخطوط.

الوحدة معناها
px لجعل حجم الخط ثابت و لا يتأثر بإعدادات حجم الخط الموضوعة في المتصفح.
em لجعل حجم الخط يتغير نسبةً لحجم الخط الموضوع في العنصر الأب.
rem لجعل حجم الخط يتغير نسبةً لحجم الخط الموضوع في أعلى عنصر في الصفحة و الذي هو العنصر <html>.
% لجعل حجم الخط يتحدد بشكل مئوي و بالتالي يتغير نسبةً لحجم العنصر الأب الموضوع فيه.
vw إذا كان النص سيُعرض على كامل عرض الشاشة فيمكن استخدام هذه الوحدة لتحديد حجم الخط نسبةً لعرضها.
vh إذا كان النص سيُعرض على كامل طول الشاشة فيمكن استخدام هذه الوحدة لتحديد حجم الخط نسبةً لطولها.

حجم الخط الإفتراضي للنصوص العادية التي يتم وضعها في الفقرات هو 16px و هذا يساوي 1em أيضاً.


الفرق بين حجم الخط الثابت و المتغير

حجم الخط الثابت ( Absolute ) يقصد به أنه لا يتغيير إذا قام المستخدم بتغييره من إعدادات المتصفح أو قام باستخدام جهاز حجم شاشته مختلف.

حجم الخط المتغير ( Relative ) هو الذي يتغير نسبةً للحجم الذي حدده المستخدم في إعدادات المتصفح أو نسبةً لحجم العنصر الأب أو نسبةً لحجم الشاشة نفسها.


تحديد الحجم بالوحدة px

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة px.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style> 
* {
    font-family: Tahoma, Verdana, sans-serif;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 24px;
}

p {
    font-size: 14px;
}
        </style>
	</head>
	<body>
        <h1>CSS font-size</h1>
        <h2>Set font size in px</h2>
        <p>All elements are using fixed font size.</p>
	</body>
</html>

تحديد الحجم بالوحدة em

الوحدة em تحول نسبتها إلى px نسبةً لحجم الخط الموضوع في المتصفح، إفتراضياً حجم الخط في المتصفح هو 16px و بالتالي 1em = 16px.

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة em.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style> 
* {
    font-family: Tahoma, Verdana, sans-serif;
}

h1 {
    font-size: 2.5em;  /* 2.5em x 16 = 40px */
}

h2 {
    font-size: 1.5em;  /* 1.5em x 16 = 24px */
}

p {
    font-size: 0.875em;  /* 1.5em x 16 = 24px */
}
        </style>
	</head>
	<body>
        <h1>CSS font-size</h1>
        <h2>Set font size in em</h2>
        <p>If you change the font size in browser all
		   font sizes set in em unit will change automatically.</p>
	</body>
</html>

تحديد الحجم بالوحدة rem

الوحدة rem تحول نسبتها إلى px نسبةً لحجم الخط الموضوع في الوسم <html> و بالتالي إذا وضعت حجم خطه 16px فإن 1rem = 16px.

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة rem.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style> 
* {
    font-family: Tahoma, Verdana, sans-serif;
}
            
html {
    font-size: 16px;
}

h1 {
    font-size: 2.5rem;  /* 2.5rem x 16 = 40px */
}

h2 {
    font-size: 1.5rem;  /* 1.5rem x 16 = 24px */
}

p {
    font-size: 0.875rem;  /* 1.5rem x 16 = 24px */
}
        </style>
	</head>
	<body>
        <h1>CSS font-size</h1>
        <h2>Set font size in rem</h2>
        <p>If you change the font size in html selector all
		   font sizes set in rem unit will change automatically.</p>
	</body>
</html>

تحديد الحجم بالوحدة %

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة %.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style> 
* {
    font-family: Tahoma, Verdana, sans-serif;
}
            
body {
    font-size: 16px;
}
            
h1 {
    font-size: 250%;  /* 250% / 16 = 40px */
}

h2 {
    font-size: 150%;  /* 150% / 16 = 24px */
}

p {
    font-size: 87.5%;  /* 87.5% / 16 = 14px */
}
        </style>
	</head>
	<body>
        <h1>CSS font-size</h1>
        <h2>Set font size in percentage</h2>
        <p>If you change the font size in the parent element
		   which is the body, all font sizes set in rem unit
		   will change automatically.</p>
	</body>
</html>

تحديد الحجم بالوحدة vw

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة vw.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style> 
* {
    font-family: Tahoma, Verdana, sans-serif;
}
            
h1 {
    font-size: 10vw;  /* أي 10% بالنسبة لعرض الشاشة */
}

h2 {
    font-size: 7vw;  /* أي 7% بالنسبة لعرض الشاشة */
}

p {
    font-size: 3.5vw;  /* أي 3.5% بالنسبة لعرض الشاشة */
}
        </style>
	</head>
	<body>
        <h1>CSS font-size</h1>
        <h2>Set font size in percentage</h2>
        <p>If you resize the window horizontally, all font
		   sizes set in % unit will change automatically.</p>
	</body>
</html>

تحديد الحجم بالوحدة vh

في المثال التالي قمنا بتحديد أحجام العناوين و الفقرات بالوحدة vh.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style> 
* {
    font-family: Tahoma, Verdana, sans-serif;
}
            
h1 {
    font-size: 10vh;  /* أي 10% بالنسبة لطول الشاشة */
}

h2 {
    font-size: 7vh;  /* أي 7% بالنسبة لطول الشاشة */
}

p {
    font-size: 3.5vh;  /* أي 3.5% بالنسبة لطول الشاشة */
}
        </style>
	</head>
	<body>
        <h1>CSS font-size</h1>
        <h2>Set font size in percentage</h2>
        <p>If you resize the window vertically, all font
		   sizes set in % unit will change automatically.</p>
	</body>
</html>

تعريف كل خصائص الخط بسطر واحد

جميع خصائص الخط يمكنك تحديدها للعنصر دفعة واحدة من خلال وضع الخاصية font و تمرير خصائص القيم التالية لها بالترتيب:

font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];

عند تحديد خصائص الخط بشكل مختصر يمكنك عدم ذكرها كلها إن لم ترد تحديدها و لكنك مجبر على تحديد حجم الخط font-size و نوعه font-family لأنها خصائص إجبارية و ليست إختيارية كباقي الخصائص.


في المثال التالي قمنا بإضافة كل خصائص الخط بشكل مختصر.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style> 
h1 {
    font: small-caps bold 40px/1 cursive;
}
            
p {
    font: italic small-caps bold 16px/2 cursive;
}
        </style>
	</head>
	<body>
        <h1>CSS shorthand</h1>
        <p class="demo">This text looks very cool.
        it uses italic style, small-caps as font
        variant, bold as font weight, 16px as font
        size, 2 by 16px as line height and the font
        family cursive.</p>
	</body>
</html>

استخدام خطوط جوجل

هناك أنواع خطوط عديدة تكون موجودة في أغلب أجهزة المستخدمين مثل arial و serif و غيرهما تستطيع استخدامها إن أردت و لكن لا ينصح باستخدام هذه الخطوط لأنها ليست جميلة مقارنةً بأنواع الخطوط المجانية الرائعة التي يمكنك تحميلها جوجل.

معظم المواقع تستخدم خطوط جوجل سواء كانت مواقع أجنبية أو عربية و بالطبع في تصاميمك التي تبنيها أنت في المستقبل ننصحك أيضاً باستخدامها.

التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال