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.