آموزش ویژگی font-family در CSS

انتخاب فونت مناسب برای وب سایت، مهم است.

انتخاب فونت مهم است

انتخاب فونت مناسب، تأثیر زیادی بر نحوه تجربه خوانندگان از یک وب سایت دارد. استفاده از فونتی که به سادگی قابل خواندن باشد، مهم است. فونت مناسب، به سایت شما ازرش می دهد. همچنین، انتخاب رنگ و سایز متن، برای فونت، بسیار مهم است.

خانواده فونت های عمومی(Generic Font Families)

در CSS، پنج خانواده ی فونت عمومی(generic) وجود دارد که عبارتند از:

1. فونت های Serif، لبه های کوچکی(stroke) در کناره های هر حرف دارند. آنها حس ظرافت و رسمی بودن را ایجاد می کنند.
2. فونت های Sans-serif، خط های تمیزی دارد( لبه های کوچک در آنها نیست). آنها ظاهری مدرن و مینیمال ایجاد می کنند.

3. فونت های Monospace، که در آن تمام حروف دارای عرض(width) ثابتی هستند. آنها ظاهری ماشینی(mechanical look) ایجاد می کنند.

4. فونت های Cursive، از دست خط انسان تقلید می کنند.

5. فونت های Fantasy، فونت های تزئینی را مشخص می کنند.

تمام این نام های مختلف فونت که ذکر شد، به یک خانواده های فونت عمومی(generic font families) تعلق دارند.

تفاوت بین فونت های Serif و Sans-serif

نکته: در صفحه ی نمایش رایانه ها،خوانایی فونت های sans-serif نسبت به فونت های serif آسان تر است.

مثالی از چند فونت

ویژگی font-family در CSS

در CSS، با استفاده از ویژگی font-family، می توانیم فونت یک متن را مشخص کنیم.

نکته: اگر نام فونت، بیش از یک کلمه باشد، باید آنها را در داخل علامت های نقل قول یا همان علامت های کوتیشن قرار دهیم. مانند: "Times New Roman".

نکته: در ویژگی font-family باید چند نام فونت را بعنوان فونت بازگشتی(fallback) قرار دهیم؛ تا اطمینان حاصل شود که در مرورگرها و سیستم عامل عامل های مختلف، سازگاری داشته باشد. با یک فونت دلخواه شروع کنید و در آخر از یک خانواده ی کلی(generic family) پایان دهید(تا اگر دیگر فونت ها در دسترس نبودند، به مرورگر اجازه دهیم تا یک فونت مشابه را در خانواده ی کلی(generic family) انتخاب کند. نام فونت ها باید با استفاده از علامت کاما، از یکدیگر جدا شود. در مورد فونت های بازگشتی(fallback) در مقالات بعدی صحبت خواهد شد.

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}