فونت در CSS

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

خواص فونت در CSS

خانواده ی فونت ( family font) (مجموعه فونت هایی که نمایانگر اشکال مختلف یک نوع typeface یا طرح حروف هستند)، پررنگی boldness ،اندازه و همچنین سبک یک نوشته یا متن را تعریف می کنند .

خانواده های فونت (family font) در CSS

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

family generic خانواده ی عمومی – گروهی از فونت ها که ظاهری مشابه دارند از میان آن ها می توان به “Serif ” و “Monospace ” اشاره کرد.

family font خانواده ی فونت  – یک نوع خانواده ی فونت ویژه از جمله “Roman New Times ” و  “Arial”.

نکته توجه داشته باشید که خواندن فونت های serif-sans در مقایسه با فونت های serif روی صفحه نمایش رایانه به مراتب آسان تر است .

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

ویژگی های خانواده ی فونت با خاصیت family-font تعیین می گردند .

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

نکته چنانچه اسم یک خانواده ی فونت ( family font ) متشکل از چندین حروف (بیش از یک حرف) باشد، در آن صورت باید اسم فونت مزبور را داخل کاراکتر یا عالمت نقل و قول دوتایی (quotation double) قرار . “Times New Roman” مثال، دهید در مثالی که در ذیر ارائه شده، بیش از یک family font در لیست با استفاده از ویرگول از هم جدا شده اند

مثال

p {
serif; ، Times، font-family: "Times New Roman"
}

سبک فونت ها (style Font)

Font style یا همان سبک فونت عمدتا به منظور مشخص کردن متن ها و نوشته های خوابیده و حروف کج بکار می روند .

خصوصیت نام برده سه مقدار متفاوت دارد

normal – که در آن متن به صورت عادی نمایش داده می شود.

Italic – که متن به صورت خوابیده نشان داده می شوند .

Oblique – که در آن نوشته یا حروف درست مشابه italic متمایل شده یا کج می شوند (بیشر به منظور شبیه سازی حالت italic یا حروف خوابیده بکار می رود)

مثال

p.normal {
 font-style: normal;
}
p.italic {
 font-style: italic;
}
p.oblique {
 font-style: oblique;
}

فونت در CSS

اندازه ی فونت (Size Font)

همان طور که از اسم آن پیدا است. این خصیصه اندازه ی فونت را تعریف می کند .

قابلیت و توانایی مدیریت اندازه ی نوشته ها و متن ها در طراحی وب از اهمیت بسیار بالایی برخوردار است . با این وجود شما به هیچ وجه نباید با بهره گیری از قابلیت تنظیم اندازه ی فونت کاری کنید که پاراگراف ها ظاهری شبیه به تیتر (heading) و یا تیتر ظاهری مشابه پاراگراف ها پیدا کنند .

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

مقدار size-font ممکن است یک مقدار مطلق(absolute) و حتی نسبی (relative) باشد .

اندازه ی مطلق

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

تنظیم و انتخاب اندازه بر حسب پیکسل (با پیکسل)

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

مثال

h1{
 font-size: 40px;
}
h2 {
 font-size: 30px;
}
p {
 font-size: 14px;
}

نکته در صورت استفاده از پیکسل، می توان با بهره گیری از ابزار بزرگنمایی (tools zoom) کل یک صفحه ی وب را مجددا اندازه بندی کرد (به طور دلخواه اندازه ی آن تغییر داد) .

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

برای اجازه دادن به کاربرها جهت اندازه بندی مجدد متن (قابل دسترسی از طریق فهرست گزینش مرورگر مربوطه)، بسیاری از طراحان وب به جای استفاده از پیکسل، واحد em را بکار می برند .

W3C بهره گیری از واحد اندازه بندی فوق را به طراحان وب توصیه می کند .

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

با بهره گیری از فرمول ذیل می توان واحد پیکسل را به em محاسبه و تبدیل کرد

مثال

h1 {
 font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
 font-size: 1.875em; /* 30px/16=1.875em */
}
p {
 font-size: 0.875em; /* 14px/16=0.875em */
}

در مثالی که در بالا مشاهده می کنید، اندازه ی نوشته بر حسب em در حقیقت برابر است با مثال پیشین که بر حسب پیکسل اندازه بندی شده بود . با این وجود، با استفاده از اندازه ی em ،قابلیت تنظیم اندازه ی نوشته در تمامی مرورگرها وجود دارد . متاسفانه، در ویرایش های قدیمی تر IE باز به مشکل برمی خوریم . هنگامی که سعی می کنیم اندازه ی متن را نسبت به قبل بزرگتر کنیم، متن بیش از حد دلخواه بزرگنمایی می شود و زمانی هم که سعی بر کوچک تر کردن نوشته می کنیم باز با همین چالش روبه رو می شویم .

بکاربردن ترکیبی از Percent و Em

راه حلی که در کلیه ی مرورگرها کارگر و موثر واقع می شود. این است که size-font پیش فرض را در قسمت یا عنصر بدنه <body> بر حسب درصد تنظیم کنیم.

مثال

body {
 font-size: 100%;
}
h1 {
 font-size: 2.5em;
}
h2 {
 font-size: 1.875em;
}
p {
 font-size: 0.875em;
}

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

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

۱. font

کلیه ی خصوصیت های فونت را طی یک تعریف تنظیم و انتخاب می کند

۲. font-family

اسم فونت مورد نظر را مشخص می کند. (خانواده ی فونتی که برای متن بکارگرفته می شود را تعیین می کند)

۳.font-size

اندازه ی فونت (قلم نوشته) را برای نوشته ی مورد نظر تنظیم می کند

۴. font-style

سبک فونت انتخابی را برای متن مشخص می کند

۵. font-variant

مشخص می کند آیا یک متن با قلم نوشته (font caps-small) نمایش داده شود یا خیر.

۶. font-weight

این خصوصیت میزان توپر بودن (Weight) متن را تعریف می کند.

ممنون که در این جلسه هم با ما همراه بودید. در این جلسه به یادگیری فونت در CSS پرداخته شد. در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت. پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید