ال وزن الخط يتم استخدام الخاصية في CSS لتعيين وزن الخط أو سمكه. يحدد مدى سماكة أو نحافة الأحرف في النص. ال وزن الخط تعتمد الخاصية إما على الأوزان المحددة بواسطة المتصفح أو على وجوه الخطوط المتوفرة في عائلة الخطوط. تحدد خاصية CSS هذه الأحرف الرفيعة إلى السميكة.

يقبل القيمة الرقمية المحددة مسبقًا أو قيم الكلمات الرئيسية. الكلمات الرئيسية المتاحة التي يمكننا استخدامها مع هذه الخاصية هي عادي وجريء وأخف وزنا وأكثر جرأة . يمكن أن تكون القيمة الرقمية 100، 200، 300، .........، حتى 900. تمثل القيمة الرقمية الأعلى وزن الخط الأكثر غامقًا من القيم الرقمية الأقل.

بناء الجملة

 font-weight: normal | bold | bolder | lighter | number | initial | inherit; 

ال رقم في بناء الجملة أعلاه يمثل القيم الرقمية. القيمة الرقمية 400 هي نفس قيمة الكلمة الرئيسية طبيعي ، والقيمة 700 هي نفس قيمة الكلمة الرئيسية عريض .

ال طبيعي تحدد قيمة strong> الأحرف العادية، و عريض تحدد القيمة الأحرف السميكة. ال أكثر جرأة تمثل القيمة وزن الخط الأكثر جرأة، و ولاعة تمثل القيمة وزن الخط الأخف من الوزن الموروث من الأصل.

دعونا نرى كيفية جعل النص غامقًا في CSS باستخدام الرسم التوضيحي.

مقدمة

يُعرف CSS بأنه أداة قوية لتطوير صفحة الويب. وبمساعدة ذلك، يمكننا تصميم محتوى HTML بعدة طرق. إحدى الخصائص الأكثر شيوعًا لتصميم صفحة الويب هي استخدام خاصية وزن الخط. بمساعدة النص الغامق، يمكننا التأكيد على المعلومات الأساسية والتباين البصري، كما يعمل ذلك أيضًا على تحسين إمكانية قراءة المحتوى.

فهم خاصية وزن الخط

في CSS، توجد خاصية Font-Weight، والتي تُستخدم لتحديد وزن الخط أو سمكه. كما أنه يحدد درجة جرأة النص أو خفة النص، مع قبول القيمة الأعلى مما يشير إلى وزن الخط الأكثر جرأة. تقبل الخاصية Font-weight قيمًا مختلفة، مثل القيم الرقمية وقيم الكلمات الرئيسية.

يقع نطاق القيم الرقمية بين 100 و900، مع زيادات قدرها 100. على سبيل المثال، إذا أخذنا قيمة وزن الخط على أنها 400، فهذا أمر طبيعي، في حين تعتبر قيمة وزن الخط 700 غامقة. غامق، وأكثر جرأة، وأخف وزنا، وبعض قيم الكلمات الرئيسية شائعة الاستخدام.

كيفية إنشاء نص عريض باستخدام CSS

يمكننا إنشاء النص الغامق بتنسيق HTML بمساعدة CSS. يمكننا استخدام خصائص نمط الخط المضمنة أو الداخلية أو الخارجية.

1. كيف يمكننا إنشاء النص الغامق باستخدام التصميم المضمّن

بمساعدة التصميم المضمّن، يمكننا استخدام خاصية وزن الخط مباشرةً لعنصر HTML محدد. لنأخذ مثالا.

كود HTML:

 Document <p>Welcome to javaTpoint</p> <p>This is a bold text</p> 

انتاج |

توضيح:

ما هو رقم الأبجدية

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

2. كيف يمكننا إنشاء نص غامق مع التصميم الداخلي

هنا، علينا كتابة خاصية CSS داخل علامة الرأس مع علامة النمط. لنأخذ مثالا:

كود HTML:

 Document p { font-weight: bold; } <p>Welcome to javaTpoint</p> <p>This is a bold text</p> 

انتاج |

توضيح:

في الكود أعلاه، استخدمنا CSS داخليًا وقمنا بتطبيق خاصية وزن الخط.

3. كيف يمكننا إنشاء نص غامق مع التصميم الخارجي

هنا، يتعين علينا إنشاء ملف CSS خارجي وربطه بملف HTML. داخل ملف CSS هذا، علينا كتابة خاصية النمط. دعونا نأخذ مثالا على ذلك.

كود HTML:

 Document <p>Welcome to javaTpoint</p> <p>This is a bold text</p> 

كود CSS:

 p { font-weight: bold; } 

انتاج |

توضيح:

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

مثال

دعونا نرى كيفية إنشاء نص غامق بظلال مختلفة باستخدام المثال أدناه:

 p{ font-size: 20px; } <p>This font is normal.</p> <p>This font is bold.</p> <p>This font is lighter.</p> <p>This font is bolder.</p> <p>This font is 100 weight.</p> <p>This font is 200 weight.</p> <p>This font is 300 weight.</p> <p>This font is 400 weight.</p> <p>This font is 500 weight.</p> <p>This font is 600 weight.</p> <p>This font is 700 weight.</p> <p>This font is 800 weight.</p> <p>This font is 900 weight.</p> 

انتاج |