آموزش ویژگی font-variant-caps در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی font-variant-caps در CSS با من همراه باشید.

آموزش ویژگی font-variant-caps در CSS

Free-Learn

ویژگی font-variant-caps در CSS

ویژگی font-variant-caps در واقع گسترش یافته ی ویژگی font-variant می باشد، که در CSS3 اضافه شده است و چندین مقدار جدید نیز به این ویژگی اضافه شده است.

مثلا ما با استفاده از ویژگی font-variant و مقدار small-caps میتونستیم تمامی حروف کوچک موجود در متن رو به حروف بزرگ تبدیل کنیم، ولی در این حالت حروف بزرگ موجود در متن کمی بزرگتر از بقیه حروف نمایش داده میشد.

حال ما با استفاده از ویژگی font-variant-caps و مقادیر جدیدی که در CSS3 براش اضافه شده میتونیم مثلا کاری کنیم که حتی اون حروف بزرگ که گفتم کمی بزرگتر نمایش داده میشن، اونارم کوچیک کنیم. ( مثال کمی پایین تر )

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی font-variant-caps را در زبان CSS مشاهده نمایید.

امتحان کنید

Free-Learn

جدول مشخصات ویژگی font-variant-caps در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض normal
قابل ارث بری دارد | اطلاعات بیشتر
قابل متحرک سازی ندارد | اطلاعات بیشتر
نسخه CSS3
نحوه استفاده در جاوااسکریپت object.style.fontVariantCaps=”small-caps”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی font-variant-caps در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
font-variant-caps ۵۲٫۰ ۳۴٫۰ ۳۹٫۰ خیر خیر

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی font-variant-caps در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
normal پیش فرض – فونت در حالت عادی خودش نمایش داده میشود
small-caps حروف کوچک به حروف بزرگ تبدیل میشوند
ولی حروف بزرگ کمی بزرگتر از بقیه حروف نمایش داده میشوند
all-small-caps تمامی حروف چه بزرگ و کوچک به حروف بزرگ تبدیل میشوند
petite-caps نمایش حروف Petite ( ریز / کوچک )
all-petite-caps نمایش حروف Petite ( ریز / کوچک ) برای حروف کوچک و بزرگ
unicase نمایش ترکیبی از حروف بزرگ شده با حروف کوچک معمولی موجود در متن
titling-caps نمایش عناوین بزرگ شده
unset نگاه میکنه اگه عنصر پدری بود inherit اعمال میکنه و اگه پدری نبود initial رو اعمال میکنه
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

این ویژگی در مرورگرهای ( اینترنت اکسپلورر ) IE و Safari ( سافاری ) پشتیبانی نمیشود.

اگر از مقادیر petite-caps یا all-petite-caps استفاده کرده باشید ولی خوده فونت از این قابلیت پشتیبانی نکنه، در خروجی رفتار متن همانند مقادیر small-caps یا all-small-caps می باشد.

اگر از مقدار unicase استفاده کرده باشید ولی خوده فونت از این قابلیت پشتیبانی نکنه، در خروجی رفتار متن همانند مقدار small-caps می باشد.

اگر از مقدار titling-caps استفاده کرده باشید ولی خوده فونت از این قابلیت پشتیبانی نکنه، متن در خروجی هیچ رفتاری از خود نشان نمیدهد. ( عملا هیچ )

Free-Learn

دریافت PDF یا پرینت این مطلب