ضخامت خط تزئین متن – ویژگی text-decoration-thickness در CSS

ویژگی text-decoration-thickness در CSS برای تعیین ضخامت خط تزئین متن به کار می‌رود. در واقع این ضخامت روی تزئیناتی اعمال می‌شود که با استفاده از ویژگی text-decoration-line و سایر ویژگی‌های مرتبط، به متن موردنظر اضافه می‌شود.

نکته: مقدار این ویژگی در کنار سایر ویژگی های مرتبط با خط تزئین متن با کمک ویژگی خلاصه text-decoration نیز قابل تعیین است. بنابراین اگر می‌خواهید چند ویژگی مختلف نظیر نوع، رنگ، استایل و ضخامت خط تزئین متن را مشخص کنید می‌توانید تمام آن‌ها را با کمک ویژگی text-decoration به صورت یکجا تنظیم کنید.

بیشتر بخوانید: خط تزئین متن در CSS – ویژگی text-decoration

نحوه تعیین ضخامت خط تزئین و استفاده از ویژگی text-decoration-thickness

برای تعیین ضخامت خط تزئین متن در CSS کافیست مقدار ویژگی text-decoration-thickness را مشابه با مثال زیر مشخص کنید:

.dtext{
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: solid;
  text-decoration-thickness: 20px;
}

مقدار 20px برای این ویژگی در مثال بالا باعث می‌شود خط تزئین متن با ضخامت 20 پیکسل رسم شود. با توجه به مقدار underline برای ویژگی text-decoration-line، مقدار red برای ویژگی text-decoration-color و مقدار solid برای ویژگی text-decoration-style این خط به صورت آندرلاین، با رنگ قرمز و به شکل خطی ساده رسم می‌شود. تصویر زیر نتیجه اعمال قانون فوق را روی یک پاراگراف با کلاس dtext نمایش می‌دهد:

<p class="dtext">This is a simple paragraph.</p>

مقادیر متداول

شما می‌توانید از مقادیر متداول زیر برای ویژگی text-decoration-thickness استفاده کنید:

• auto: این مقدار، مقدار پیشفرض برای ویژگی text-decoration-thickness است. در این حالت مرورگر میزان ضخامت خط تزئین متن را مشخص می‌کند.
• from-font: با کمک این مقدار در صورتی که فایل فونت شامل اطلاعاتی راجع به میزان ضخامت ارجح باشد از همان مقدار برای ضخامت خط تزئین متن استفاده می‌شود. در غیراینصورت عملکردی مشابه با مقدار auto خواهد داشت.
• طول: درج مقدار همراه با واحد طول نظیر px (پیکسل), cm (سانتی متر), pt (پوینت) و … برای این ویژگی، یکی از روش‌های رایج برای تعیین میزان ضخامت خط تزئین متن است. برای مثال مقدار 5px و 1cm.
• درصد: درج مقدار برحسب درصد برای ویژگی text-decoration-thickness میزان ضخامت خط تزئین متن را به صورت درصدی از اندازه فونت المان مشخص می‌کند. برای مثال مقدار 80%.

بازگشت به فهرست مجموعه آموزشی CSS