no-img

اِمیلا استایل Font در CSS
0
امروز : چهارشنبه 2 مرداد 1398ساعت : 12:18ورودعضویت
اِمیلا
ترفند وب استایل Font در CSS
فرم گزارش را به دقت تکمیل نمایید
از همکاری شما سپاسگذاریم

ادامه مطلب

بروزسانی شده در 26 تیر 1398
استایل Font در CSS
امتیاز 5.00 ( 2 رای )
رمز : emila.ir
حمایت از emila.ir
درخواست کاربران

استایل Font در CSS

emila.ir QR-code
بروزسانی شده در 26 تیر 1398
38
milipinkman

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

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

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

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

             Generic family                      Font family                                         شرح
   SerifTimes New Roman Georgiaفونت های Serif خط های کوچکی در انتهای برخی از
کاراکترها دارند
Sans-serifArial Verdanaپیشوند “Sans” یعنی بدون – این نوع فونت در انتهای
کاراکترهای خود خط ندارند
MonospaceCourier 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
designer
نظرات ارسال شده توسط شما، پس از تایید، توسط مدیران سایت منتشر خواهد شد.
نظراتی که به غیر از زبان فارسی، غیر مرتبط با مطلب یا فینگلیش باشد، منتشر نخواهد شد.

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

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

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

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

Here is a some short information about me: I'm a natural born, writer, designer, forecaster, Interested in PHP programming and activities in the field of digital currency, basically I'm a pretty simple person. I work for Emila.ir for more than 1 years. I am passionate about creating posts and content for emila.ir which I think is Among the best viral persian Websites. I am available at Nearby

ارسال پیامک  -  ارسال ایمیل
IP شما: 18.232.99.123