در ادامه سلسله مقالات آموزش CSS در این مقاله در مورد خصوصیت font-variant
در سی اس اس صحبت خواهیم کرد.
با استفاده از ویژگی font-variant
می توان حروف بزرگ انگلیسی را با اندازه کوچک نمایش داد.
البته این ویژگی در زبان هایی کاربرد دارد که حروف کوچک و بزرگ در انها وجود دارد مانند زبان انگلیسی ولی در زبان هایی مانند زبان فارسی که حروف بزرگ و کوچک در ان وجود ندارد،این ویژگی نیز طبیعتا کاربردی ندارد.
طراح فونت می تواند حروف بزرگ را با اندازه و طرح خاص خود طراحی کند و ما هر زمان که در طرح نیاز باشد می توانیم از آن استفاده کنیم.
در سی اس اس می توان با استفاده از ویژگی font-variant
می توان تعیین کرد متون یک عنصر با حروف بزرگ نوشته شوند یا با حروف کوچک مثلا اگر مقدار این ویژگی را برابر با uppercase
قرار دهیم تمام حروف متن به حالت بزرگ تبدیل می شوند،فرقی هم نمی کند متن نوشته ما با حروف بزرگ باشد یا کوچک.به مثال زیر توجه کنید :
p { text-transform: uppercase; /* PZOF.IR */ }
p { text-transform: capitalize; /* Pzof.Ir */ }
p { text-transform: lowercase; /* pzof.ir */ }
طراح فونت می تواند حروف بزرگ الفبا را با اندازه کوچکتر نیز طراحی کند که با استفاده از ویژگی font-variant
و تعیین مقدار small-caps
برای آن می توان از آن حروف استفاده کرد.
حال این سوال پیش می آید که ویژگی text-transform
و مقدار uppercase
چه تفاوتی با مقدار small-caps
برای ویژگی font-variant
دارد؟
تفاوت در این است که زمانی که از ویژگی text-transform
و مقدار uppercase
استفاده می کنید تغییرات توسط مرورگر بر روی فونت معمولی به صورت خودکار انجام می شود. اما زمانی که از small-caps
و ویژگی font-variant
استفاده می کنیم مرورگر از حروف مخصوص طراحی شده استفاده می کند.به عنوان مثال دموی زیر را مدنظر بگیرید :
استفاده از مقدار 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;
امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه آموزش های CSS با ما همراه باشید.
کامنت جدید ...