فونت ها در CSS

یکی دیگر از مواردی که در طراحی یک سایت مورد توجه قرار می‌گیرد، مباحث مربوط به فونت‌ها هستند. در دوره html یاد گرفتیم که چگونه برای متون خود از فونت‌های متفاوت استفاده کنیم. اما مساله‌ای که وجود داشت این بود که  فقط می‌توانستیم از فونت‌های پیش فرض استفاده کنیم. اما اکنون می‌خواهیم یاد بگیریم که چگونه فونت های دلخواه خودمان را به css اضافه کنیم و به متون خود فونت‌های جذاب و دلخواه بدهیم. همچنین ما می‌توانیم استایل، اندازه و وزن فونت‌ها را نیز تغییر دهیم. اما چگونه؟

اضافه کردن فونت دلخواه در CSS

ابتدا تعیین فونت دلخواه را توضیح می‌دهیم. برای این کار ابتدا باید یک پوشه با نام fonts در پوشه ی اصلی که مربوط به پروژه مان است ایجاد کنیم. سپس فونت‌هایی را که می‌خواهیم به سندمان اضافه کنیم را درون آن پوشه قرار دهیم. سپس از دستور زیر استفاده کنیم:

@font-face {

font-family :  ;

Src: url(‘  آدرس فونت ‘) ;

}

در این ساختار همانطور که مشخص است برای مقدار font-family نام فونتی که قرار است استفاده کنیم را می‌نویسیم. توجه کنید که لزومی‌ ندارد حتما نام اصلی فونت را بنویسیم، بلکه می‌توانیم هر نام دلخواهی برای آن انتخاب کنیم؛ ولی باید حواسمان باشد که همان نام را در ادامه کار استفاده کنیم. اما در ادامه دستورات باید آدرس فونت را نسبت به فایل css بنویسیم. نحوه آدرس دهی را در جلسات قبل توضیح داده‌ایم. تا اینجا فونت دلخواه‌مان را به سند اضافه کرده‌ایم، حالا در هر جایی از سندمان که بخواهیم از این فونت استفاده کنیم کافی است از دستور font-family:””; استفاده کنیم و نام فونتی را که در بالا اضافه کردیم را بنویسیم.

استایل فونت

تغییر استایل فونت یعنی اینکه حالت‌های مختلف normal و italic را به فونت‌مان بدهیم. برای این کار می‌توانیم از دستور زیر استفاده کنیم.

font-style: italic ;

در این صورت فونت ما به صورت مورب نمایش داده می‌شود.

اندازه یا سایز فونت

برای تغییر اندازه فونت می‌توانیم از دستور زیر استفاده کنیم و اندازه متون خود را بزرگ و یا کوچک کنیم.

font-size:    ;

برای مقدار آن می‌توانیم از عدد استفاده کنیم مانند 20px

توجه کنید در مواقعی که نیاز به استفاده از تیتر‌ها دارید ، از بزرگ کردن اندازه فونت استفاده نکنید، چرا که بزرگ کردن سایز، تنها ظاهر متن را تغییر می‌دهد و مفهوم مهم بودن متن را ایجاد نمی‌کند. در صورتی که تگ های heading علاوه‌بر بزرگ کردن ظاهر، معنا و مفهوم هم دارند. پس در استفاده کردن از دستور اندازه فونت دقت کنید.

وزن فونت

وزن فونت مربوط به میزان چاقی آن است. ما می‌توانیم وزن فونت را با استفاده از دستور زیر تغییر دهیم:

font-weight:  600  ;

برای مقدار این دستور هم می‌توانیم از عدد و بدون واحد استفاده کنیم مانند 600 و یا اینکه از مقادیر حرفی مانند bold , lighter , normal و … استفاده کنیم.