no-img
اِمیلا

استایل Font در CSS

بروزرسانی؛
14 مارس 2020

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

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

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

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

             Generic family                       Font family                                          شرح
   Serif Times New Roman Georgia فونت های Serif خط های کوچکی در انتهای برخی از
کاراکترها دارند
Sans-serif Arial Verdana پیشوند “Sans” یعنی بدون – این نوع فونت در انتهای
کاراکترهای خود خط ندارند
Monospace Courier New Lucida Console تمامی کاراکترهای monospace از یک میزان پهنا
برخوردار هستند

نکته:

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

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

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

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

نکته:

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

در مثالی که در ذیر ارائه شده، بیش از یک font family در لیست با استفاده از ویرگول از هم جدا شده اند.

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

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

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

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

  • normal – که در آن متن به صورت عادی نمایش داده می شود.
  • Italic – که متن به صورت خوابیده نشان داده می شوند .
  • Oblique – که در آن نوشته یا حروف درست مشابه italic متمایل شده یا کج می شوند (به منظورشبیه سازی حالت italic یا حروف خوابیده بکار می رود)
p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}

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

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

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

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

اندازه ی مطلق

نوشته را به یک اندازه ی تعریف شده تنظیم می کند.

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

توجه: 

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

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

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

h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p {
font-size: 14px;
}

نکته:

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

تنظیم اندازه ی فونت با 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

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

body {
font-size: 100%;
}

h1 {
font-size: 2.5em;
}

h2 {
font-size: 1.875em;
}

p {
font-size: 0.875em;
}

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

منبع: w3school

لینک کوتاه : https://emila.ir/?p=16809
سلام علیکم!
11
فرم گزارش را به دقت تکمیل نمایید...
از همکاری شما پیشاپیش سپاسگذاریم