فونت در CSS (Fonts)
انتخاب «فونت در CSS» روی هویت برند و تجربه خواندن اثر می گذارد. زیرا فونت مناسب، علاوه بر زیبایی، خوانایی و دسترس پذیری را بهبود می دهد و با اندازه و رنگ درست، نتیجه بهتری می دهد.
انتخاب فونت اهمیت دارد
فونت درست می تواند هویت بصری قدرتمندی بسازد. همچنین باید خوانایی را در نظر گرفت و اندازه و رنگ متن را متناسب انتخاب کرد.
ویژگی font-family در CSS
ویژگی font-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; }
نکته: اگر نام فونت بیش از یک واژه است، آن را درون کوتیشن بنویسید؛ مانند "Times New Roman"
. برای آشنایی با فونت های ایمن به بخش «فونت های وب ایمن» مراجعه کنید.
خانواده های عمومی فونت
- Serif – سرکش های کوچک در لبه حروف؛ رسمی و کلاسیک.
- Sans-serif – خطوط تمیز و بدون سرکش؛ مدرن و مینیمال.
- Monospace – همه حروف پهنای ثابت دارند؛ ظاهری مکانیکی.
- Cursive – شبیه دست خط انسان.
- Fantasy – تزئینی و بازیگوش.
راهنمای خانواده های عمومی در MDN
تفاوت Serif و Sans-serif
روی نمایشگرها معمولاً خواندن فونت های sans-serif آسان تر است؛ بنابراین برای متن های طولانی وب، اغلب انتخاب بهتری هستند.
نمونه هایی از فونت ها
نمونه های متداول شامل: «Times New Roman»، «Georgia»، «Garamond» در گروه Serif؛ «Arial»، «Verdana»، «Helvetica» در گروه Sans-serif؛ و «Courier New»، «Lucida Console»، «Monaco» در گروه Monospace هستند.
نکته: همیشه زنجیره fallback را با یک خانواده عمومی مانند serif
یا sans-serif
تمام کنید.
یادداشت های کاربردی
برای نتیجه بهتر، تنظیمات فونت را همراه با سایر ویژگی های متنی بررسی کنید: صفحه رنگ متن، فاصله گذاری متن و افکت های سایه متن.