font-style

با استفاده از ویژگی font-style می توان استایل فونت را به صورت italic و یا oblique تعیین کرد.

در حالت استاندارد باید فونتی که برای صفحه استفاده می شود فایلی مربوط به استایل italic و همینطور فایلی برای استایل oblique داشته باشد.

حال اگر برای یک عنصر در صفحه ویژگی font-style را مثلا برابر با italic قرار دهیم فونت مربوط به این حالت برای عنصر تنظیم می شود. حال اگر فونت دارای فایلی مربوط به استایل italic نبود، مرورگر از فایل oblique استفاده می کند.

و یا باالعکس اگر برای عنصری ویژگی font-style را برابر با oblique قرار دهیم اما فونت دارای چنین استایلی نباشد مرورگر از فایل italic کمک می گیرد و این استایل را برای ویژگی تنظیم می کند.

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

تصویر زیر را در نظر بگیرید:

 

ایتالیک واقعی در مقابل شبیه سازی شده
ایتالیک واقعی در مقابل شبیه سازی شده

 
برای حرف a از فونت Palatino استفاده شده است و اولین a از سمت چپ حالت عادی این فونت است و آخرین a حالت italic آن است که بصورت ذاتی برای فونت طراحی شده است و فایل آن در دسترس مرورگر می باشد. اما حرف a دوم زمانی است که مرورگر دسترسی به حالت italic فونت ندارد و خود این حالت را شبیه سازی می کند.

همین حالت برای حرف N نیز با فونت Baskerville به نمایش گذاشته شده است.

مقادیری که این ویژگی می تواند داشته باشد سه مورد هستند:

 


font-style: normal; /* پیشفرض */
font-style: italic;
font-style: oblique;

 

به عنوان مثال می توان به این صورت از این ویژگی استفاده کرد:

 


p {
  font-family: "Open Sans", sans-serif;
  font-style: italic;
}

 

در دموی زیر دو پاراگراف آخر هر دو حالت italic و oblique را تقریبا مشابه نمایش می دهد، که دلیل این موضوع این است که فونت انتخاب شده دارای صورت italic و oblique نمی باشد و خود مرورگر، این حالات را تولید می کند:

 

See the Pen font-style by Mojtaba Seyedi (@seyedi) on CodePen.


 

سوالت رو توی پنل بحث و گفتگو مطرح کن.

8 دیدگاه برای “font-style

    1. تاجایی که من می دونم oblique همون فونت معمولی هستش که کمی شیب داره. اما italic جدا از قصه شیب تک تک کاراکترها میتونه ظاهرش به کلی فرق کنه و مثلا خم و پیچش خاص خودشو داشته باشه. معمولا هم فونت ها یکی از این دو فیس رو بیشتر ندارند. کم دیده میشه هر دوش رو واسه یک فونت طراحی کنند. که البته منطقی هم هستش.

  1. سلام. تشکر بابت کاملترین آموزش هایی که قرار می دین.یه سوال داشتم،این تیکه اشتباه نشده : “و یا باالعکس اگر برای عنصری ویژگی font-style را برابر با oblique قرار دهیم اما فونت دارای چنین استایلی نباشد مرورگر از فایل oblique کمک می گیرد و این استایل را برای ویژگی تنظیم می کند.”

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