در طراحی سایت، با داشتن فونت منحصر به فرد خودتان می توانید سایت خود را شخصی سازی کنید و جلوه بصری بهتری به صفحات وب خود ببخشید. مشخصه های فونت در CSS نوع فونت، برجستگی، سایز و استایل یک متن را تعریف می کنند. این ویژگی ها بسیار کاربردی هستند و هر طراح سایتی به آنها نیاز پیدا خواهد کرد.
تفاوت بین فونت های Serif و Sans-serif
نکته: به خاطر داشته باشید که خواندن فونت های sans-serif نسبت به فونت های serif بسیار آسان تر می باشد.
گروه های فونت در CSS
در CSS، دو گروه اسم خانواده فونت وجود دارد:
- generic family - یک گروه عمومی از فونت ها که شکلی همسان دارند (مانند "Serif" یا "Monospace" )
- font family - گروهی بخصوص از فونت ها (مانند "Times New Roman" یا "Arial" )
فونت متن در CSS
فونت یک متن باید با مشخصه font-family تنظیم شود. مشخصه font-family باید چندین نام فونت را در خود نگه دارد. اگر مرورگر از فونت اول پشتیبانی نکند، فونت های بعدی را به ترتیب امتحان می کند و در واقع فونت های بعدی مانند فونت های جایگزین می باشند.
با فونتی که می خواهید شروع کنید، و با یک generic family تمامش کنید، که به مرورگر اجازه دهید یک فونت مشابه را در صورتی که فونت دیگری در دسترس نباشد در generic family انتخاب کند. برای درک بهتر مطلب به مثال زیر توجه کنید:
در این مثال 3 پاراگراف برای تست انواع فونت ها در نظر گرفته شده و با استفاده از ویژگی font-family به آنها فونت های گوناگونی داده شده است که در زیر می توانید نتیجه کار را مشاهده کنید:
در مثال زیر نیز یک نوع دیگر از فونت ها امتحان شده است:
که نتیجه کد بالا به شکل زیر است:
استایل فونت در CSS
مشخصه font-style دارای سه مقدار می باشد:
- نرمال
- ایتالیک
- Oblique (تقریبا مانند ایتالیک است)
حال برای مشخص کردن تفاوت های میان این استایل ها، هرکدام از آنها را در یک پاراگراف متفاوت تست می کنیم:
که نتیجه به شکل زیر خواهد بود:
وزن متن در CSS
مشخصه font-weight وزن یک فونت را مشخص می کند:
همانطور که مشاهده می کنید، یک متن می تواند وزن های متفاوتی داشته باشد که باعث پررنگ شدن آن می شود. در این مثال وزن های normal, lighter, bold و 900 آزمایش شده است و نتیجه هریک به شکل زیر می باشد:
Font Variant در CSS
مشخصه font-variant مشخص می کند که آیا یک متن باید با small-caps نشان داده شود یا خیر. در نوع small-caps تمام حروف کوچک در همان سایز به حروف بزرگ تبدیل می شوند.
همانطور که مشاهده می کنید در پاراگراف دوم همه حروف متن به حرف بزرگ تبدیش شده اند اما سایز آنها تغییر نکرده است:
سایز فونت در CSS
مشخصه font-size سایز فونت در یک متن را مشخص می کند. توانایی مدیریت سایز فونت در زمینه طراحی وب سایت بسیار حائز اهمیت است. اما به خاطر داشته باشید که نباید از قابلیت تغییر سایز فونت برای درست کردن عناوین و... استفاده کنید. همیشه از تگ های HTML مانند <h1> - <h6> برای عنوان ها و از <p> برای پاراگراف ها استفاده کنید.
سایز فونت می تواند مطلق و یا نسبی باشد.
سایز مطلق:
- متن را به یک سایز مشخص درمی آورد.
- به کاربر اجازه نمی دهد تا سایز متن را در مرورگرها تغییر دهد.
- سایز مطلق در مواقعی به کار می آید که سایز فیزیکی خروجی اهمیت دارد.
سایز نسبی:
- سایز متن را نسبت به عنصرهای کناری مشخص می کند.
- به کاربر اجازه می دهد تا سایز متن را در مرورگرها تغییر دهد.
تنظیم اندازه فونت با پیکسل
تنظیم کردن اندازه متن با پیکسل به شما اجازه می دهد تا بصورت خیلی دقیق تر به اندازه فونت مورد نظر خود برسید:
در این مثال از عناصر h1 و h2 به جهت تعیین تیترهای مطلب استفاده شده است. همچنین اندازه فونت آنها را نیز با استفاده از ویژگی font-size تغییر داده ایم. برای عنصر p نیز همینطور عمل کرده ایم. به خاطر داشته باشید که به طور کلی عناصر h1 تا h6 سایز بزرگتری نسبت به عنصر p دارند و همانطور که گفته شد در طراحی سایت از این عناصر برای تعیین تیترها استفاده می شود. در زیر می توانید تفاوت را مشاهده کنید.
تنظیم سایز فونت با em
برای اینکه به کاربران اجازه دهید تا سایز متن را از طریق مرورگر تغییر دهد، می توانید به جای پیکسل از em استفاده کنید.1em برابر با 16 پیکسل است که در تمام مرورگرها اندازه فونت پیش فرض برابر با 16px یا همان 1em است، بنابراین pixels16=1em
در این مثال font-size با واحد em مقدار دهی شده است که معادل px آن نیز در مقابل آن نوشته شده است. در زیر می توانید نتیجه آن را مشاهده کنید:
در مثال بالا، سایز متن در واحد em برابر با مثال قبل در واحد پیکسل می باشد. در هر صورت، با استفاده از em قابلیت تنظیم متن در تمام مرورگرها پدید می آید.
سایز فونت Responsive
اندازه متن می تواند با یک واحد vw تنظیم شود که به معنای "viewport width" می باشد. در این صورت سایز متن براساس سایز صفحه مرورگر تغییر خواهد کرد:
که نتیجه کد بالا به شکل زیر است:
فونت های گوگل در CSS
اگر می خواهید از فونت های استاندارد در HTML استفاده کنید، می توانید از Google Fonts API برای اضافه کردن صدها فونت جدید به صفحه ی خود استفاده کنید. کافیست فقط یک لینک css اضافه کرده و به یک فونت به خصوص دسترسی داشته باشید:
در این مثال فونت های گوگل به صفحه اضافه شده اند و فونت sofia را در آن انتخاب کرده ایم:
کوتاه کردن کد فونت در CSS
همچنین برای کوتاه کردن کد فونت شما می توانید تمام مشخصه های فونت را در یک مشخصه font خلاصه کنید.
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
در این حالت کد شما کوتاه تر شده و از حجم فایل css کاسته می شود. این کاهش حجم در نهایت منجر به افزایش سرعت سایت نیز می شود:
حال به صورت خلاصه، تمام مشخصه های فونت در CSS در قالب یک جدول در زیر آمده است:
