15 - Fonts in CSS

به نام ایزد دانا

در این پست آموزشی در مورد فونت و وابسته ها صحبت خواهیم کرد.

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

اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنید

Telegram, Twitter, Facebook & ... By : @ARiyou2000<br/>

با تشکر از همه شما دوستان، آریو جهان

دیگه بریم سر اصل مطلب

استایل فونت css

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

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

در CSS ، دو گروه اسم خانواده ی فونت وجود دارند ( generic family ) خانواده ی عمومی (گروهی از فونت ها که ظاهری مشابه دارند ) از میان آن ها میتوان به “Serif” و “Monospace” اشاره کرد.
(font family ) خانواده ی فونت ( یک نوع خانواده ی فونت ویژه ) از جمله “Times New Roman” و”Arial”.

نکته توجه داشته باشید که خواندن فونت های 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: &quotTimes New Roman&quot ، &quotTimes ، serif&quot
}

Try it Yourself »

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

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

• سبک normal – که در آن متن به صورت عادی نمایش داده می شود.
• سبک Italic – که متن به صورت خوابیده نشان داده می شوند .
• سبک Oblique – که در آن نوشته یا حروف درست مشابه italic متمایل شده یا کج می شوند (بیشتر به منظورشبیه سازی حالت italic یا حروف خوابیده بکار می رود اما کمتر پشتیبانی می شود - به مثال توجه کنید)

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Try it Yourself »

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

Try it Yourself »

نکته در صورت استفاده از پیکسل، می توان با بهره گیری از ابزار بزرگنمایی ( 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 */
}

Try it Yourself »

در مثالی که در بالا مشاهده می کنید، اندازه ی نوشته بر حسب 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;

}

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

در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.

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

مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️

شب و روزگار بر شما خوش.

بدرود.

ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ