cssblog.ir logo
P

letter-spacing

میزان فاصله بین حروف متن

مشخصه letter-spacing تعیین کننده میزان فضا در بین حروف یک متن می باشد و بوسیله آن می توان فاصله بین حروف را تنظیم (کم یا زیاد) نمود

با استفاده از مشخصه letter-spacing می توان تعیین کرد که چه میزان فضا در بین حروف یک متن وجود داشته باشد. یعنی هرچه میزان مقداری که به این مشخصه داده می شود بیشتر باشد حروف متن بیشتر از یکدیگر جدا خواهند شد.

مثال: فاصله ۲ پیکسلی حروف

p {
	letter-spacing: 2px;
}

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

در مقداردهی این مشخصه می‌توان از مقادیر پیکسلی، واحدهای نسبیem و استفاده نمود که پیشنهاد می‌شود از واحدهای نسبی استفاده شود چراکه در صورتیکه سایز فونت توسط کاربر یا در طرح تغییر پیدا کند اگر واحدها نسبی داده شده باشند، فاصله حروف نیز خود تنظیم شده و تا حد زیادی نیاز به تنظیم دوباره از بین خواهد رفت.

مثال: استفاده از واحدهای پیکسلی  

مثال: استفاده از واحدهای نسبی

واحدهای subpixel

تا چندی قبل در برخی از مرورگرها این امکان وجود نداشت که واحدهای پیکسلی بامقدار کمتر از یک پیکسل برای این مشخصه تعیین شود اما اکنون در تمام مرورگرهای مدرن این امکان وجود دارد که میزان فاصله با مقداری کمتر از یک پیکسل (مثلا نیم پیکسل) تعیین شود.

مثال:

p {
	letter-spacing: 0.5px;
}

استفاده در زبان فارسی

اگر از این مشخصه برای متن‌های فارسی استفاده شود حروف متن از یکدیگر جدا شده و دیگر مثل قبل به یکدیگر نمی‌چسبند و کاربرد اصلی این مشخصه برای زبان‌هایی مانند انگلیسی است که حروف جدا از هم دارند. در زبانی مانند فارسی مگر به دلایل خاص یا پیاده سازی طرحی خاص ممکن است که بخواهیم از این مشخصه استفاده کنیم.

استفاده در انیمیشن

نکته جالب درباره این مشخصه این است که letter-spacingیک مشخصه animatable است و اگر بخواهید (گرچه بعید می دانم) می توانید روی آن انیمیشن تعیین کنید.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند