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

هذه بعض سمات الخط المهمة:

لون الخط CSS: تستخدم هذه الخاصية لتغيير لون النص. (سمة مستقلة)عائلة الخطوط CSS: تستخدم هذه الخاصية لتغيير وجه الخط.حجم الخط CSS: تستخدم هذه الخاصية لزيادة أو تقليل حجم الخط.نمط الخط CSS: تُستخدم هذه الخاصية لجعل الخط غامقًا أو مائلًا أو مائلًا.متغير الخط CSS: تقوم هذه الخاصية بإنشاء تأثير الأحرف الصغيرة.وزن خط CSS: تستخدم هذه الخاصية لزيادة أو تقليل حجم الخط وخفة الخط.

1) لون الخط CSS

يعد لون خط CSS سمة مستقلة في CSS على الرغم من أنه يبدو أنه جزء من خطوط CSS. يتم استخدامه لتغيير لون النص.

هناك ثلاثة تنسيقات مختلفة لتحديد اللون:

• بواسطة اسم اللون
• حسب القيمة السداسية العشرية
• بواسطة RGB

في المثال أعلاه، قمنا بتعريف كل هذه التنسيقات.

 body { font-size: 100%; } h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); } } <h2>This heading is shown in serif.</h2> <p>This paragraph is written in monospace.</p> 

انتاج:

 <h2>This heading is shown in sans-serif.</h2> <h3>This heading is shown in serif.</h3> <p>This paragraph is written in monospace.</p> 

3) حجم الخط CSS

يتم استخدام خاصية حجم الخط CSS لتغيير حجم الخط.

هذه هي القيم المحتملة التي يمكن استخدامها لتعيين حجم الخط:

 Practice CSS font-size property <p> This font size is extremely small.</p> <p> This font size is extra small</p> <p> This font size is small</p> <p> This font size is medium. </p> <p> This font size is large. </p> <p> This font size is extra large. </p> <p> This font size is extremely large. </p> <p> This font size is smaller. </p> <p> This font size is larger. </p> <p> This font size is set on 200%. </p> <p> This font size is 20 pixels. </p> 

انتاج:

حجم الخط هذا صغير للغاية.

حجم الخط هذا صغير جدًا

حجم الخط هذا صغير

حجم الخط هذا متوسط.

حجم الخط هذا كبير

حجم الخط هذا كبير جدًا.

حجم الخط هذا كبير جدًا.

حجم الخط هذا أصغر.

حجم الخط هذا أكبر.

تم تعيين حجم الخط هذا على 200%.

حجم الخط هذا هو 20 بكسل.

4) نمط الخط CSS

تحدد خاصية نمط الخط CSS نوع الخط الذي تريد عرضه. وقد تكون مائلة أو مائلة أو عادية.

 body { font-size: 100%; } h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; } } <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> 

انتاج:

 <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> 

5) متغير الخط CSS

تحدد خاصية متغير الخط في CSS كيفية تعيين متغير الخط لعنصر ما. قد تكون عادية وصغيرة الحجم.

 p { font-variant: small-caps; } h3 { font-variant: normal; } <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> 

انتاج:

 <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> 

6) وزن الخط CSS

تحدد خاصية وزن الخط في CSS وزن الخط وتحدد مدى خط الخط. قد تكون القيم المحتملة لوزن الخط عادية أو غامقة أو أكثر قتامة أو أفتح أو رقمًا (100، 200..... حتى 900).

هذا الخط غامق.

هذا الخط أكثر جرأة.

هذا الخط أخف.

وزن هذا الخط 100.

وزن هذا الخط 200

وزن هذا الخط 300.

دمج الفرز جافا

وزن هذا الخط 400.

وزن هذا الخط 500.

وزن هذا الخط 600.

وزن هذا الخط 700.

وزن هذا الخط 800.

وزن هذا الخط 900.

انتاج:

هذا الخط غامق.

هذا الخط أكثر جرأة.

هذا الخط أخف.

وزن هذا الخط 100.

وزن هذا الخط 200

وزن هذا الخط 300.

وزن هذا الخط 400.

وزن هذا الخط 500.

وزن هذا الخط 600.

وزن هذا الخط 700.

وزن هذا الخط 800.

وزن هذا الخط 900.