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

استایل Font در CSS

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

استایل عناصر در CSS

  • استایل پس زمینه ها
  • استایل متن ها
  • استایل فونت‌ها (این پست)
  • استایل لینک ها
  • استایل لیست ها
  • استایل جداول

استایل فونت css

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

استایل css
استایل css

خانوادهای فونت ( 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;

}

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

در بخش بعدی آموزش سی اس اس ، به بررسی  دنیای لینک ها در استایل css می پردازیم . با ما همراه باشید.

برچسب ها

نوشته های مشابه

پاسخی بگذارید

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

همچنین ببینید

بستن
دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر