css-text-effects

فونت، رنگ، سایز و سایه متن

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

آنچه در این مقاله می خوانید ...

 

ویژگی های مرتبط به متن ها در css

توصیه می کنیم تمامی ویژگی های مرتبط به متن ها که در زیر آمده را خوب فرا گرفته و از آن ها نهایت بهره را در طراحی سایت خود ببرید :

ویژگی توضیحات
color رنگ متن را تنظیم می کند
direction راستای نوشتن متن را مشخص می کند
letter-spacing فاصله بین حروف را تنظیم می کند
line-height ارتفاع خطوط را تنظیم می کند
text-align تراز افقی متن را مشخص می کند
text-decoration دکوراسیون را به متن اضافه می کند
text-indent شروع خط اول در بلوک متن را مشخص می کند
text-shadow اثر سایه را به متن اضافه می کند
text-transform بزرگنمایی متن را کنترل می کند
text-overflow مشخص می کند که محتوای سرریز باید به کاربر نشان داده شود یا خیر
vertical-align تراز عمودی یک عنصر را تنظیم می کند
white-space مشخص می کند که چگونه فضای خالی درون یک عنصر مورد استفاده قرار می گیرد
word-spacing فاصله بین کلمات را در یک متن افزایش یا کاهش می دهد

در گذشته عناصر نوشتاری در html را به شما معرفی کردیم، حال می خواهیم بدانیم چگونه می توان این عناصر را سبک داده و شکل و رنگ آن ها را به گونه ای که مایلیم تغییر دهیم.

color-fonts

برای سبک دهی به متون سایت ابتدا به دنبال یک فونت زیبا بگردید و آن را به سند html خود الحاق کنید. طریقه صحیح استفاده از فونت فارسی را در اینجا مشاهده کنید. سپس به صورت زیر فونت الحاق شده را به عناصری که نیاز دارید اختصاص دهید :

  • element{
  • font-family: family-name|generic-family|initial|inherit;
  • }

حال نوبت سایز فونت عناصر نوشتاریست که به اندازه مورد نیاز تغییر کند :

  • font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;

ویژگی های فونت در css

همچنین می توانید ویژگی های دیگری به فونت های خودتان اضافه کنید که در زیر برای شما آورده ایم :

ویژگی توضیحات
font تمام ویژگی های فونت در یک اعلامیه را تنظیم می کند
font-family خانواده فونت را برای متن تعریف می کند
font-size اندازه فونت متن را مشخص می کند
font-style سبک فونت متن را مشخص می کند
font-variant مشخص می کند که آیا یک متن باید در یک فونت کوچک نمایش داده شود یا نه
font-weight میزان بولد بودن فونت را مشخص می کند

سپس رنگ متن ها را به خوبی تنظیم کرده و در صورت نیاز از ویژگی های جدول اول برای زیبا سازی سایت به درستی استفاده کنید.

توجه برای زیبا سازی متون و عمق دادن به نوشته می توانید از خصوصیت text-shadow استفاده کنید. این خصوصیت چهار پارامتر را گرفته و سایه به متن شما اضافه می کند :

  • text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
همچنین بخوانید...!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *