صفحه اصلی / آموزش CSS / بخش سیزدهم- آموزش فونت CSS یا آموزش CSS Fonts

بخش سیزدهم- آموزش فونت CSS یا آموزش CSS Fonts

 

 آموزش Fontsدر CSS
آموزش فونت CSS

فونت  CSS

خصوصیات فونت CSS ، خانواده فونت، ضخامت، اندازه و سبک متن را تعریف می کند.

 

خانواده فونت(CSS Font Families)  

در CSS، دو نوع نام font family وجود دارد:

generic family خانواده عمومی- گروهی از font families با ظاهر مشابه (مانند “Serif” یا “Monospace”)
font family خانواده فونت – یک خانواده فونت خاص (مانند “Times New Roman” یا “Arial”)

 

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

 

font family (فونت خانواده

خانواده فونت یک متن با ویژگی font-family تنظیم شده است.

ویژگی فونت خانواده باید چندین نام فونت را به عنوان یک سیستم “fallback” یا پشتیبان نگه دارد. اگر مرورگر اولین فونت را پشتیبانی نکند ، سعی خواهد کرد فونت بعدی را شناسایی کند و  به همین ترتیب .

با فونتی که می خواهید شروع به نوشتن کنید و با یک generic family کار را پایان دهید تا اگر فونت مورد نظر در دسترس نباشد مرورگر فونت مشابهی در خانواده عمومی انتخاب کند.

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

بیش از یک font family در لیست با کاما جدا شده و مشخص می شود:

مثال:

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

 

Font Style(نوع قلم

خصوصیت font-style عمدتا برای مشخص کردن متن ایتالیک استفاده می شود.

این ویژگی دارای سه مقدار است:

normal – متن به طور معمول نشان داده می شود.
Italic – متن به صورت مایل یا italic نشان داده می شود.
normal – متن  به صورت “leaning” یا کمی مایل نشان داده می شود (leaning بسیار شبیه به italic است اما کمتر پشتیبانی می شود)

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

 

Font Size(اندازه قلم

ویژگی font-size اندازه قلم متن را تنظیم می کند.

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

همیشه از برچسب های مناسب HTML مانند <h1> – <h6> برای عنوان ها و <p> برای پاراگراف ها استفاده کنید.

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

ابعاد مطلق:

متن را به یک اندازه مشخص تنظیم می کند
اجازه نمیدهد که کاربر اندازه متن را در تمام مرورگرها تغییر دهد (بدلیل دلایل دسترسی)
اندازه مطلق زمانی مفید است که اندازه فیزیکی خروجی شناخته شده است

اندازه نسبی:

اندازه را نسبت به عناصر اطراف تنظیم می کند
به کاربر امکان می دهد اندازه متن را در مرورگرها تغییر دهد

توجه: اگر شما یک اندازه فونت را مشخص نکنید، اندازه پیش فرض متن معمولی، مانند پاراگراف ها، ۱۶ پیکسل (۱۶ پیکسل = ۱) است.

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

تنظیم اندازه متن با پیکسل به کنترل کامل بر اندازه متن می انجامد:

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

تنظیم اندازه فونت با EM

برای اجازه دادن به کاربران برای تغییر اندازه متن (در منوی مرورگر)، بسیاری از توسعه دهندگان از آنها به جای پیکسل استفاده می کنند.

واحد اندازه EM توسط W3C توصیه می شود.

۱em برابر اندازه فونت فعلی است. اندازه متن پیش فرض در مرورگرها ۱۶ پیکسل است. بنابراین، اندازه پیش فرض ۱em برابر ۱۶ پیکسل است.

اندازه را می توان از پیکسل ها به EM با استفاده از این فرمول محاسبه کرد: پیکسل ها / ۱۶ = em

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

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

از ترکیبی از درصد و EM استفاده کنید

راه حل که در تمام مرورگرها کار می کند این است که یک فونت پیش فرض به صورت پیش فرض برای عنصر <body> تنظیم شود:

کد ما در حال حاضر عالی کار می کند! این اندازه متن را در تمام مرورگرها نشان می دهد و به تمام مرورگرها اجازه می دهد تا متن را بزرگنمایی یا تغییر اندازه دهند!

Font Weight وزن قلم

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

Responsive Font Size اندازه فونت پاسخگو

اندازه متن را می توان با واحد VW تنظیم کرد، که به معنی “عرض عرض نمایش” است.

به این ترتیب اندازه متن از اندازه پنجره مرورگر پیروی می کند:

Viewport اندازه پنجره مرورگر است. ۱vw = 1٪ از عرض عرض مشاهده اگر عرض نمایش ۵۰cm عرض باشد، ۱vw 0.5cm است.

Font Variant فونت Variant

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

در فونت small-caps، تمام حروف کوچک به حروف بزرگ تبدیل می شوند. با این حال، حروف بزرگ شده تبدیل شده در اندازه فونت کوچکتر از حروف بزرگ بزرگ در متن ظاهر می شود.

 

 

بخش سیزدهم- آموزش فونت CSS یا آموزش CSS Fonts

لطفا امتیاز بدهید



منبع مطلب

این مطالب را نیز ببینید!

بخش یازدهم- آموزش CSS Outline

  CSS Outline (طرح کلی CSS) یک outline یا طرح کلی، خطی است که در …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *