محتوای آموزشی

ویژگی font-variant در سی اس اس

ویژگی font-variant در سی اس اس

در ادامه سلسله مقالات آموزش 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 با ما همراه باشید.

کامنت جدید ...
Sort by:

مطالب پیشنهادی

'