فهرست سرفصل‌های CSS
خانه (Home) CSS مقدمه CSS (Introduction) سینتکس CSS (Syntax) انتخاب گرهای CSS (Selectors) نحوه استفاده از CSS (How To) کامنت ها در CSS (Comments) ارورها در CSS (Errors) رنگ ها در CSS (Colors) رنگ ها - RGB و RGBA رنگ ها - هگز (HEX Colors) رنگ ها - HSL و HSLA پس زمینه (Backgrounds) پس زمینه - تصویر (Backgrounds Image) پس زمینه - تکرار تصویر (Backgrounds Image Repeat) پس زمینه - پیوست (Background Attachment) پس زمینه - کوتاه نویسی (Background Shorthand) کادرها (Borders) کادرها - عرض (Borders Width) کادرها - رنگ (Borders Color) کادرها - کناره ها (Borders Sides) کادرها - کوتاه نویسی (Shorthand Border Property) کادرها - گرد (Rounded Borders) لایه (Padding) ارتفاع، عرض و حداکثر عرض (Height, Width and Max-width) مدل جعبه ای (Box Model) خط پیرامونی (Outline) خط پیرامونی - ضخامت (Outline Width) خط پیرامونی - رنگ (Outline Color) خط پیرامونی - کوتاه نویسی (Outline Shorthand) خط پیرامونی - آفست (Outline Offset) متن - رنگ (Text Color) متن - چینش (Text Alignment) متن - تزئینات (Text Decoration) متن - تبدیل حروف (Text Transformation) متن - فاصله گذاری (Text Spacing) متن - سایه (Text Shadow) فونت ها (Fonts) فونت های وب سیف (Font Web Safe) فونت - جایگزین ها (Font Fallbacks) فونت - سبک (Font Style) فونت - اندازه (Font Size) فونت - گوگل (Font Google) فونت - کوتاه نویسی (Font Shorthand)
CSS

CSS — فونت ها (Fonts)

آخرین بروزرسانی: 1404/07/13

فونت در 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". برای آشنایی با فونت های ایمن به بخش «فونت های وب ایمن» مراجعه کنید.

مستندات font-family در MDN

خانواده های عمومی فونت

  1. Serif – سرکش های کوچک در لبه حروف؛ رسمی و کلاسیک.
  2. Sans-serif – خطوط تمیز و بدون سرکش؛ مدرن و مینیمال.
  3. Monospace – همه حروف پهنای ثابت دارند؛ ظاهری مکانیکی.
  4. Cursive – شبیه دست خط انسان.
  5. 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 تمام کنید.

یادداشت های کاربردی

برای نتیجه بهتر، تنظیمات فونت را همراه با سایر ویژگی های متنی بررسی کنید: صفحه رنگ متن، فاصله گذاری متن و افکت های سایه متن.