آموزش طراحی سایت - فونت ها در CSS

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

آموزش طراحی سایت - فونت ها در CSS

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


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

آموزش فونت ها در CSS

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


گروه های فونت در CSS

در CSS، دو گروه اسم خانواده فونت وجود دارد:

  • generic family - یک گروه عمومی از فونت ها که شکلی همسان دارند (مانند "Serif" یا "Monospace" )
  • font family - گروهی بخصوص از فونت ها (مانند "Times New Roman" یا "Arial" )
آموزش طراحی سایت

فونت متن در CSS

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

آموزش CSS

در این مثال 3 پاراگراف برای تست انواع فونت ها در نظر گرفته شده و با استفاده از ویژگی font-family به آنها فونت های گوناگونی داده شده است که در زیر می توانید نتیجه کار را مشاهده کنید:

آموزش استایل دهی فونت در CSS


در مثال زیر نیز یک نوع دیگر از فونت ها امتحان شده است:

آموزش استایل دهی فونت در CSS

که نتیجه کد بالا به شکل زیر است:

آموزش طراحی سایت

استایل فونت در CSS

مشخصه font-style دارای سه مقدار می باشد:

  • نرمال
  • ایتالیک
  • Oblique (تقریبا مانند ایتالیک است)

حال برای مشخص کردن تفاوت های میان این استایل ها، هرکدام از آنها را در یک پاراگراف متفاوت تست می کنیم:

آموزش CSS

که نتیجه به شکل زیر خواهد بود:

آموزش کار با فونت در CSS

وزن متن در CSS

مشخصه font-weight وزن یک فونت را مشخص می کند:

آموزش CSS

همانطور که مشاهده می کنید، یک متن می تواند وزن های متفاوتی داشته باشد که باعث پررنگ شدن آن می شود. در این مثال وزن های normal, lighter, bold و 900 آزمایش شده است و نتیجه هریک به شکل زیر می باشد:

آموزش استایل دهی فونت در CSS

Font Variant در CSS

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

آموزش طراحی سایت

همانطور که مشاهده می کنید در پاراگراف دوم همه حروف متن به حرف بزرگ تبدیش شده اند اما سایز آنها تغییر نکرده است:

آموزش CSS

سایز فونت در CSS

مشخصه font-size سایز فونت در یک متن را مشخص می کند. توانایی مدیریت سایز فونت در زمینه طراحی وب سایت بسیار حائز اهمیت است. اما به خاطر داشته باشید که نباید از قابلیت تغییر سایز فونت برای درست کردن عناوین و... استفاده کنید. همیشه از تگ های HTML مانند <h1> - <h6> برای عنوان ها و از <p> برای پاراگراف ها استفاده کنید.

سایز فونت می تواند مطلق و یا نسبی باشد.

سایز مطلق:

  • متن را به یک سایز مشخص درمی آورد.
  • به کاربر اجازه نمی دهد تا سایز متن را در مرورگرها تغییر دهد.
  • سایز مطلق در مواقعی به کار می آید که سایز فیزیکی خروجی اهمیت دارد.

سایز نسبی:

  • سایز متن را نسبت به عنصرهای کناری مشخص می کند.
  • به کاربر اجازه می دهد تا سایز متن را در مرورگرها تغییر دهد.

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

تنظیم کردن اندازه متن با پیکسل به شما اجازه می دهد تا بصورت خیلی دقیق تر به اندازه فونت مورد نظر خود برسید:

آموزش طراحی سایت

در این مثال از عناصر h1 و h2 به جهت تعیین تیترهای مطلب استفاده شده است. همچنین اندازه فونت آنها را نیز با استفاده از ویژگی font-size تغییر داده ایم. برای عنصر p نیز همینطور عمل کرده ایم. به خاطر داشته باشید که به طور کلی عناصر h1 تا h6 سایز بزرگتری نسبت به عنصر p دارند و همانطور که گفته شد در طراحی سایت از این عناصر برای تعیین تیترها استفاده می شود. در زیر می توانید تفاوت را مشاهده کنید.

آموزش CSS

تنظیم سایز فونت با em

برای اینکه به کاربران اجازه دهید تا سایز متن را از طریق مرورگر تغییر دهد، می توانید به جای پیکسل از em استفاده کنید.1em  برابر با 16 پیکسل است که در تمام مرورگرها اندازه فونت پیش فرض برابر با 16px یا همان 1em است، بنابراین pixels16=1em

آموزش CSS

در این مثال font-size با واحد em مقدار دهی شده است که معادل px آن نیز در مقابل آن نوشته شده است. در زیر می توانید نتیجه آن را مشاهده کنید:

آموزش فونت ها در CSS

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


سایز فونت Responsive

اندازه متن می تواند با یک واحد vw تنظیم شود که به معنای "viewport width" می باشد. در این صورت سایز متن براساس سایز صفحه مرورگر تغییر خواهد کرد:

آموزش طراحی سایت

که نتیجه کد بالا به شکل زیر است:

آموزش طراحی سایت

فونت های گوگل در CSS

اگر می خواهید از فونت های استاندارد در HTML استفاده کنید، می توانید از Google Fonts API برای اضافه کردن صدها فونت جدید به صفحه ی خود استفاده کنید. کافیست فقط یک لینک css اضافه کرده و به یک فونت به خصوص دسترسی داشته باشید:

آموزش فونت ها در CSS

در این مثال فونت های گوگل به صفحه اضافه شده اند و فونت sofia را در آن انتخاب کرده ایم:

آموزش فونت ها در CSS

کوتاه کردن کد فونت در CSS

همچنین برای کوتاه کردن کد فونت شما می توانید تمام مشخصه های فونت را در یک مشخصه font خلاصه کنید.

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family
آموزش کار با فونت در CSS

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

آموزش CSS

حال به صورت خلاصه، تمام مشخصه های فونت در CSS در قالب یک جدول در زیر آمده است:

آموزش طراحی سایت
آموزش طراحی سایت آموزش CSS آموزش کار با فونت ها در CSS آموزش فونت ها در CSS استایل دهی فونت در CSS

مقالات این دسته بندی