جلسه ۲۸.۵ – استایل Font در CSS

استایل css
استایل 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 می پردازیم . با ما همراه باشید.

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

8 نظر

8 پاسخ

    1. سلام محمد متین. روش های مختلفی برای آموزش وجود داره، ولی ساختار CSS به شکلی نیست که از ابتدای کار به صورت پروژه محور آموزش داده بشه، اول باید از صفر و به صورت داکیومنت محور آموزش داده شه و بعد میشه برای پروژه محور بودنش فکری کرد.
      اما چرا که نه، می تونیم در آینده روش فکر کنیم 🙂

  1. سلام ممنون از سایت خوبتون توی این سایت من هرچی داره تو دفتر وارد میکنم بیشترش هم توضیحاتش است
    ایا لازم است هرچی توی این سایت نوشته رو وارد دفتر کنم
    چون برای این که کد ها رو حفظ بشم
    ممنون میشم جوابم رو بدهید

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

  2. با سلام خدمت شما … من در حال ادیت و ترجمه یک بازی ساده بودم که در بخش فونتش با مشکل شدید مواجه شدم که هر کاری میکنم خوب نمیشه … اولا که حروف فارسی اصلا به هم چسبیده نیستند … دوما اینکه کلا برعکسش مثلا به جای “سلام به شما” مینویسه “ا م ش ه ب س ل ا م” … باید چی کار کنم … کل کدی هم که داره برای فونت رو براتون آپلود کردم.
    لطفا پاسخ بدین … دیگه واقعا دارم کلافه میشم

    1. سلام نیما. اگه هنوز مشکل حل نشده، با فونت های دیگه هم کار نمیکنه؟ یا فقط مشکل از فونت مورد نظرته؟

        1. نیما با توضیحی که تو دادی نمیشه چیزی نفهمید. باید کل اون پروژه ای که داری انجام میدی رو بدی به یک نفر تا بررسی کنه.

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

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

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

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