شرح الخاصية font وعناصرها

شرح الخاصية font وعناصرها

0

شرح الخاصية font وعناصرها

الخاصية font

اليوم مقال جديد عن الخاصية font وشرح اضافتها في موقعك سواء كنت علي ووردبريس أو بلوجر أو أي منصة أخري ، خاصية font هي خاصية من خواص CSS وشرحنا سابقا بعض من خواص هذه اللغة الرائعة المتخصصة في التصميم .

عائلات الخطوط أو CSS Font Families يجب علي كل مصمم اضافة كود من هذه الاكواد الخاصة بعائلات الخطوط لأن بالتأكيد الخطوط مهمة لأي صفحة ويب ولأي موقع .

شرح الخاصية font

font-family

أول خاصية سنقوم بشرحها هي font-family وهي من أهم الخواص في CSS لأنها تقوم بوضع الخطوط في الموقع وعلي سبيل المثال هذا كود font-family :-

[dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#ca2c68″ theme=”dark” language=”css” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

font-family: 'Noto Kufi Arabic',Oswald;

[/dm_code_snippet]

كما رأيت هذا مثال لوضع كود لخط كوفي عربي وخط Oswald والبنية الرسمية لعنصر font-family يكون علي هذا الشكل :-

[dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#ca2c68 ” theme=”dark” language=”css” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

font-family: [ <family-name> | <generic-family> ]#;

[/dm_code_snippet]

والــ family generic هي الأسرة العامة وهي مجموعة من الخطوط لديهم مظهر مماثل

يوجد خطوط جاهزة الاستخدام وابرزهم خطوط جوجل العربية او الاجنبية والتي تتميز بالسرعة الممتازة والسلاسة ، يمكنك اختيار أي خط تريده وتقوم باضافة كود الخط أسفل <head> وتقوم باضافته لموقعك واذا كنت علي منصة ووردبريس فيمكنك إضافة خطوط مخصصة إلى ووردبريس بكل بسهولة .

 

font-style

نأتي لثاني خاصية من عائلات الخاصية font وهي font-style حيث تتحكم هذه الخاصية في شكل الخط وهذه الخاصية لديها 3 قيم محددة وأساسيين وهم :-

normal & italic & oblique

وهذا مثال علي كود من أكواد Font-style :-

[dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#ca2c68″ theme=”dark” language=”css” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

font-style: italic;

[/dm_code_snippet]

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

Font-size

الخاصية التالية هي Font-size وهي تتحكم في حجم الخط تحدد خاصية حجم الخط حجم النص.
القدرة على إدارة حجم النص مهم في تصميم الويب. ومع ذلك ، يجب ألا
تستخدم تعديلات حجم الخط لجعل الفقرات تبدو مثل العناوين ، أو أن
العناوين تبدو مثل الفقرات.

[dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#ca2c68″ theme=”dark” language=”css” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

font-size: 22px;

[/dm_code_snippet]

والحجم الافتراضي او الحجم العادي للفقرات هو 16 px وال px تعني بيكسل ويمنحك ضبط حجم النص بالبكسل التحكم الكامل في حجم النص

ويمكنك ايضا تعيين حجم الخط بـ em ، حجم النص الافتراضي في المتصفحات هو ١٦ بكسل كما قلنا . لذلك ، الحجم الافتراضي ل em الذي يساوي 16px هو 1em

[dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#ca2c68″ theme=”dark” language=”css” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

font-size: 2em;

[/dm_code_snippet]

ويمكنك ايضا استخدام النسبة المئوية في تحديد حجم الخط

font-weight

الخاصية font-weight هي خاصية تتحكم في وزن الخطوط ولديها قيم مثل

bold : سميك / bolder : أكثر سمكا / Lighter : خفيف

[dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#ca2c68″ theme=”dark” language=”css” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

font-weight: bold;

[/dm_code_snippet]

ويمكنك ايضا تحديد حجم الخطوط بالأرقام من 100 حتي رقم 900 وللعلم بأن وزن الخط العادي هو 400 والسميك bold 700

[dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#ca2c68″ theme=”dark” language=”css” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

font-weight: 700;

[/dm_code_snippet]

كل هذه الخواص او الخاصيات المذكورة في الأعلي يمكنك استخدامها للنصوص في أي منصة فقط ثم بالبحث عن المعرفات او اسماء العناصر وقم بوضع اكواد تمييز الخطوط بها وستعمل معك بدون أي مشاكل , بالنسبة لمدونين ووردبريس يمكنك اضافة هذه الأكواد في أي مكان يدعم css سواء في اعدادات قالبك أو في المظهر – التخصيص – تنسيقات CSS اضافية ، او في اضافة Code Snippets مثلا التي قمنا بوضع شروحات لها سابقا.

وهذه هي اهم عناصر الخاصية fonts وانتظروا باقي مقالات بخصوص عناصر وخاصيات css وhtml وjavascript !

انتهي مقال اليوم شكرا لمتابعتك للمقال ولاتنسي الاشتراك في الأسفل لكي نرسل لك كلمات رئيسية عالية الزيارة وعالية الربح CPC مجانا ! شكرا لزيارتك ويب تايمز قم بمشاركة الموضوع اذا افادك ولا تنسي الاطلاع علي شهاداتي واذا اردت الاستفسار عن أي شي لاتتردد في كتابته في تعليق .

لمتابعي موقع ويب تايمز فقط
سنرسل لك كلمات رئيسية عالية الزيارة وعالية الربح CPC مجانا !
يمكنك إلغاء الاشتراك في أي وقت