فاصله بین حروف و سایر کاراکترها در CSS – ویژگی letter-spacing

در CSS از ویژگی letter-spacing برای تغییر فاصله بین کاراکترهای متن از جمله حروف و اعداد استفاده می‌شود. شما می‌توانید از این ویژگی در سی اس اس برای کاهش یا افزایش فاصله افقی میان کاراکترها کمک بگیرید.

نحوه تغییر فاصله بین کاراکترها در CSS

برای تغییر فاصله بین کاراکترها در CSS کافیست مشابه با نمونه زیر مقدار مناسبی برای ویژگی letter-spacing مشخص کنید:

h2 {
  letter-spacing: 5px;
}

مقدار 5px برای این ویژگی در قانون CSS فوق باعث می‌شود به اندازه 5 پیکسل به فاصله عادی بین کاراکترها در المان‌های <h2> اضافه شود.

توجه: درج مقدار مثبت برای ویژگی letter-spacing باعث می‌شود فاصله افقی میان کاراکترها نسبت به حالت عادی افزایش پیدا کند و کاراکترها از هم فاصله بیشتری پیدا کنند. این درحالیست که درج مقدار منفی برای این ویژگی باعث می‌شود کاراکترها به یکدیگر نزدیک‌تر شوند.

تصویر زیر نمایی از نتیجه یک المان <h2> با فاصله طبیعی بین حروف، فاصله 5 پیکسل و فاصله منفی 2 پیکسل را نمایش می‌دهد که با کمک ویژگی letter-spacing در CSS مشخص شده است:

مقادیر متداول برای ویژگی letter-spacing

شما می‌توانید از مقادیر متداول زیر برای ویژگی letter-spacing به منظور تغییر میزان فاصله افقی بین کاراکترها در CSS استفاده کنید:

• normal: درج این مقدار برای ویژگی letter-spacing باعث می‌شود فاصله بین کاراکترها متناسب با فونت متن به صورت عادی یا طبیعی باشد. این مقدار، مقدار پیشفرض برای ویژگی letter-spacing است.
• طول: درج مقدار همراه با واحد طول نظیر px (پیکسل), cm (سانتی متر), pt (پوینت)، em و … برای این ویژگی، یکی از روش‌های رایج برای تغییر فاصله افقی بین کاراکترهاست. برای مثال مقدار 5px و -2px و 2em.

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