آموزش CSS – ویژگی فونت در CSS

در جلسه قبل از آموزش CSS با خصوصیت پس زمینه در CSS آشنا شدید. در این بخش قصد داریم شما را با نحوه استفاده از ویژگی فونت در CSS را آموزش بدیم.

خصوصیت (Font ) فونت در CSS به شما اجازه می دهد سبک های مختلف هر فونت همچون خانواده فونت، اندازه، بولد بودن آن، متغیرها و سایر موارد را برای یک متن تعیین کنید.

خصوصیت Font فونت در CSS :

زبان برنامه نویسی CSS خصوصیت های متعددی را برای سبک دهی فونت های استفاده شده در محتوای متنی فراهم می کند. این خصوصیت ها عبارتند از :

• font-family
• font-style
• font-variant
• font-weight
• font-size

در این بخش از سری آموزش CSS، هر کدام از خصوصیت های مرتبط با فونت را بررسی خواهیم کرد. پس همراه ما باشید.

خصوصیت Font Family:

خصوصیت خانواده های فونت(font-family) در CSS، به شما اجازه می دهد لیست اولویتی از نام خانواده فونت و/یا نام خانواده عمومی را برای محتوای متنی یک المان انتخاب شده تنظیم نمایید.

خصوصیت font-family می تواند چندین نام فونت را به عنوان سیستم fallback در خود نگه دارد.

ابتدا فونت هایی که دوست دارید در متن خود از آن ها استفاده کنید را لیست نمایید و سپس به دنبال فونت های جایگزین برای فونت هایی باشید که در دسترس خود ندارید. باید لیست خود را با خانواده فونت عمومی به پایان ببرید.

به خاطر داشته باشید که خانواده فونت عمومی در برگیرنده موارد زیر است:

• serif
• sans-serif
• monospace
• cursive
• fantasy

سینتکس مقداری ویژگی font-family شبیه کد زیر خواهد بود:

نکته: اگر نام خانواده فونت متشکل از چندین حرف باشد، باید آن را داخل علامت نقل قول قرار دهید. مثلا “Times New Roman” ، “Courier New”

سبک فونت (Font Style):

خصوصیت font-style سبک فونت را برای محتوای متنی یک المان تعیین می کند. مقادیر محتمل برای این خصوصیت شامل نرمال، ایتالیک یا oblique است.

نکته: در نگاه اول سبک ایتالیک و oblique به نظر یکسان می رسند اما این دو مورد تفاوت هایی با هم دارند. سبک ایتالیک از نسخه ایتالیک فونت استفاده می کند. این در حالیست که سبک oblique نسخه کج شده فونت نرمال و عادی است.

اندازه فونت(Font Size):

همانطور که از نامش پیداست این خصوصیت اندازه فونت برای محتوای متنی یک المان را تعیین می کند. شما می توانید اندازه فونت را به روش های مختلفی همچون کلمات کلیدی، پیکسل ها یا em مشخص کنید.

تنظیم فونت به کمک کلمات کلیدی:

با تنظیم اندازه فونت به کمک کلمات کلیدی، می توانید اندازه فونت مرتبط را در هر جایی از صفحه تنظیم کنید و همین امر به شما کمک می کند اندازه فونت را به راحتی در کل صفحات تغییر دهید.

اندازه مطلق به کمک یکی از کلمات کلیدی زیر تعیین می شود:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

به مثال زیر توجه کنید:

تنظیم اندازه فونت به کمک پیکسل ها:

تنظیم اندازه فونت به کمک مقادیر پیکسل( مثلا ۱۲ پیکسل) زمانی که به دقت پیکسلی نیاز دارید انتخاب خوبی خواهد بود.

با این حال، نتیجه حاصل از این نوع تنظیم ممکن است در مرورگرهای مختلف، متفاوت باشد زیرا هر کدام از آن ها برای دستیابی به اثرات مشابه از الگوریتم های متفاوتی استفاده می کنند.

تعریف اندازه فونت به کمک پیکسل زیاد دست یافتنی نیست زیرا کاربر نمی تواند اندازه فونت را از طریق تنظیمات مرورگر تغییر دهد.

به عنوان مثال، کاربری که از نسخه limited استفاده می کند ممکن است دوست داشته باشد اندازه فونت را کمی بزرگتر از اندازه مشخص شده توسط برنامه نویس تنظیم نماید.

بنابراین باید از به کار بردن مقادیر پیکسلی برای تنظیم اندازه فونت به هنگام ایجاد طراحی مناسب، اجتناب کرد.

نکته: متن را می توان در همه مرورگرها به کمک ابزار zoom اندازه بندی کرد. با اینحال، چنین قابلیتی کل صفحه را تغییر می دهد و تنها بر روی متن اعمال نمی شود.

تنظیم اندازه فونت به کمک Em:

واحد em به اندازه فونت المان والد اشاره دارد. اندازه یک مقدار em پویاست. اگر اندازه فونت به درستی تعریف شود، em معادل اندازه فونتی خواهد بود که به والد آن المان اعمال شده است.

به عنوان مثال اگر اندازه فونت را برای المان body بر روی ۲۰ پیکسل تنظیم کرده باشید، پس :

۱em = ۲۰px و ۲em = ۴۰px.

اگر اندازه فونت را در هیچ کجای صفحه تنظیم نکرده باشید، مرورگر به صورت پیش فرض آن را بر روی ۱۶ پیکسل تنظیم می کند. بنابراین به طور پیش فرض یک Em معادل ۱۶ پیکسل است.

هشدار: در نسخه های IE6 و IE7 زمانی که می خواهیم اندازه متن را کوچک تر از قبل تنظیم کنیم بیش از حد کوچک می شود و به هنگام بزرگنمایی نیز با همین مشکل مواجه می شویم.

استفاده ترکیبی از درصد و Em:

برای اینکه بتوانید در همه مرورگرها به نتایج یکسان و مشابهی دست پیدا کنید بهتر است اندازه فونت پیش فرض را برای المان Body به صورت درصد تنظیم نمایید.

تکنیک محبوب تنظیم اندازه فونت Body بر روی ۶۲٫۵ درصد است که معادل ۰٫۶۲۵em خواهد بود (ما به شخصه در پروژه های واقعی به وفور از این روش استفاده می کنیم.)

مثال زیر این موضوع را به خوبی نشان می دهد:

خصوصیت Font Weight:

خصوصیت font-weight میزان بولد بودن( توپر بودن) فونت را مشخص می کند. مقادیر محتمل برای خصوصیت font-style در برگیرنده موارد زیر است:

• normal
• bold
• bolder
• lighter
• ۱۰۰
• ۲۰۰
• ۳۰۰
• ۴۰۰
• ۵۰۰
• ۶۰۰
• ۷۰۰
• ۸۰۰
• ۹۰۰
• موروثی

به خاطر داشته باشید که مقادیر عددی ۱۰۰ تا ۹۰۰، توپر بودن فونت را مشخص می کنند که در آن عدد نمایش داده شده از عدد پیشین خود تیره تر است.

مقادیر bolder و lighter به مقدار موروثی مرتبط هستند. این در حالیست که سایر مقادیر font weight مطلق می باشند.

از آنجایی که میزان توپر بودن فونت ها محدود است، اغلب می توان از گزینه های normal و bold استفاده کرد. اگر فونت در weight مشخص شده وجود نداشته باشد، مقدار جایگزینی که به آن نزدیک تر است انتخاب می شود.

خصوصیت font-variant :

خصوصیت font-variant باعث می شود متن با small-caps variation نمایش داده شود. حروف کوچک با حروف معمولی فرق دارند. مقادیری که می توان برای تعیین خصوصیت font-variant مورد استفاده قرار داد شامل موارد زیر است:

• normal ( طبیعی)
• small-caps ( حروف کوچک)
• inherit ( موروثی)

امیدوارم در این بخش آموزش CSS, از ویژگی فونت در CSS نهایت استفاده را برده باشید.

در بخش بعدی با انواع خصوصیات استایل دهی متن در CSS آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.