این آموزش در تاریخ ۱۴۰۰/۱۱/۰۳ آپدیت شده است.
آموزش ویژگی font-variant-caps در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی font-variant-caps در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی font-variant-caps در CSS
ویژگی font-variant-caps در واقع گسترش یافته ی ویژگی font-variant می باشد، که چنتا مقدار جدید بهش اضافه شده.
مثلا ما با استفاده از ویژگی font-variant و مقدار small-caps میتونستیم تمامی حروف کوچک موجود در متن رو به حروف بزرگ تبدیل کنیم، ولی در این حالت حروف بزرگ موجود در متن کمی بزرگتر از بقیه حروف نمایش داده میشد.
حال ما با استفاده از ویژگی font-variant-caps و مقادیر جدیدش میتونیم مثلا کاری کنیم که حتی اون حروف بزرگ که گفتیم کمی بزرگتر نمایش داده میشن، اونارم کوچیک کنیم. ( مثال کمی پایین تر )
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی font-variant-caps را در زبان CSS مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .Box-1{ font-variant-caps: small-caps; } .Box-2{ font-variant-caps: all-small-caps; } </style> |
Free-Learn
جدول مشخصات ویژگی font-variant-caps در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | normal |
|---|---|
| قابل ارث بری | دارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.fontVariantCaps=”small-caps”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی font-variant-caps در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| font-variant-caps | ۵۲ | ۳۴ | ۳۹ | ۹٫۱ | ۷۹ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
font-variant-caps: normal|small-caps|all-small-caps|petite-caps|all-petite-caps|unicase|titling-caps|initial|inherit|unset; |
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
نکات و توضیحات
بیشتر مقادیر این ویژگی بروی هر فونتی عمل نمیکنند و باید حتما خوده فونت این قابلیت هارو پشتیبانی کنه :
- اگر از مقادیر petite-caps یا all-petite-caps استفاده کرده باشید ولی خوده فونت از این قابلیت پشتیبانی نکنه، خروجی میشه دقیقا مثه مقادیر small-caps یا all-small-caps
- اگر از مقدار unicase استفاده کرده باشید ولی خوده فونت از این قابلیت پشتیبانی نکنه، در خروجی رفتار متن همانند مقدار small-caps می باشد.
- اگر از مقدار titling-caps استفاده کرده باشید ولی خوده فونت از این قابلیت پشتیبانی نکنه، متن در خروجی هیچ رفتاری از خود نشان نمیدهد. ( عملا هیچی )
- فونت های petite-caps در واقع کمی کوچکتر از small caps ها هستن، و بهشون میگن حروف های ریز که معمولا اندازشون برابر است با اندازه حرف x انگلیسی کوچک.
