با استفاده از ویژگی font-variant می توان حروف بزرگ انگلیسی را با اندازه کوچک نمایش داد.
این ویژگی مخصوص زبان هایی می باشد که حروف کوچک و بزرگ در زبان وجود دارد. طراح فونت می تواند حروف بزرگ را با اندازه و طرح خاص خود طراحی کند و ما هر زمان که در طرح نیاز باشد می توانیم از آن استفاده کنیم.
در سی اس اس می توان با استفاده از ویژگی text-transform بر روی کوچک و بزرگ نویسی حروف انگلیسی تاثیر گذاشت. مثلا اگر مقدار این ویژگی را برابر با uppercase قرار دهیم تمام حروف متن به حالت بزرگ تبدیل می شوند.
h1 {
text-transform: uppercase; /* CSS-TRICKS.IR */
}
h1 {
text-transform: lowercase; /* css-tricks.ir */
}
h1 {
text-transform: capitalize; /* Css-Tricks.Ir */
}
همانطور که گفته شد طراح فونت می تواند حروف بزرگ الفبا را با اندازه کوچکتر نیز طراحی کند که با استفاده از ویژگی font-variant و تعیین مقدار small-caps برای آن می توان از آن حروف استفاده کرد.
حال این سوال پیش می آید که ویژگی text-transform و مقدار uppercase چه تفاوتی با مقدار small-caps برای ویژگی font-variant دارد؟
تفاوت در این است که تغییرات text-transform توسط مرورگر بر روی فونت معمولی به صورت خودکار انجام می شود. اما زمانی که از small-caps و ویژگی font-variant استفاده می کنیم مرورگر از حروف مخصوص طراحی شده استفاده می کند.
See the Pen font-variant by Mojtaba Seyedi (@seyedi) on CodePen.
همانطور که از نام small-caps پیدا است باعث می شود تا حروف بزرگ با اندازه کوچک تر از حالت معمولی نمایش داده شوند.
در مثال بالا هر دو کلمه دارای اندازه فونت یکسان هستند اما یکی از آنها از text-transform استفاده می کند و دیگری از font-variant با مقدار small-caps استفاده می کند.
اگر از فونتی استفاده می کنیم که حروف small-caps برایش طراحی نشده باشد مرورگر بصورت خودکار اندازه حروف بزرگ را برای نمایش کاهش می دهد و آن حالت را شبیه سازی می کند (البته نه تمام مرورگرها).
اگر عنصری دارای هر دو ویژگی font-variant و text-transform باشد ویژگی text-transform حرف نهایی را می زند و مقادیر font-variant نادیده گرفته می شوند.
نکته دیگر اینکه اگر در HTML تمام حروف را به صورت حروف بزرگ بنویسیم می توانیم حالت آنها را با استفاده از ویژگی text-transform تغییر دهیم و بالعکس. یعنی بصورت کلی آنچه که در HTML نوشته می شود در CSS توسط text-transform می تواند تغییر کند. اما این کار توسط ویژگی font-variant امکان پذیر نیست. مثلا اگر تمام حروف بزرگ نوشته شده باشند و مقدار این ویژگی را برابر با small-caps قرار دهیم، حروف به همان صورت بزرگ معمولی باقی می مانند.
می توانید این نکات را در مثال بالا با تغییر مقادیر و متن تحقیق کنید. ( تست کنید شاید من دروغ بگم :) )
این ویژگی مقادیر زیر را می پذیرد:
font-variant: normal; /* پیشفرض */
font-variant: small-caps;
font-variant: inherit;
سوال داری؟ برو به پنل پرسش و پاسخ