آموزش CSS – معرفی Property یی های سی اس اس (CSS) (جلسه ۱۵)

معرفی Property یی تحت عنوان font-family در سی اس اس (CSS)

معرفی Property یی تحت عنوان font-size در سی اس اس (CSS)

معرفی Property یی تحت عنوان font-weight در سی اس اس (CSS)

معرفی Property یی تحت عنوان font-style در سی اس اس (CSS)

 

معرفی Property یی تحت عنوان font-family در سی اس اس (CSS)

در فراگیری سی اس اس (CSS) شاید اولین و مهم ترین بخش نحوه به کار گیری تایپوگرافی یا به عبارت دیگر نحوه استفاده از فونت در صفحات وب است. در واقع چنانچه از قوانین تایپوگرافی سی اس اس (CSS) در صفحات خود استفاده نکنیم، قواعد پیش فرض مرورگر مورد استفاده قرار خواهد گرفت.
در به کار گیری فونت در کدهای سی اس اس (CSS) بر سر دو راهی قرار خواهیم گرفت که آیا از System fonts یا Web fonts استفاده کنیم. در گذشته برنامه نویسان محدود به فونت هایی بودند که به صورت پیش فرض روی سیستم عامل ها نصب بود که اصطلاحاً فونت های سیستمی نامیده می شوند که از آن جمله می توان به Arial، Times New Roman، Courier و … اشاره کرد.
در واقع نحوه به کار گیری فونت ها در سی اس اس به این شکل است که سیستم عامل برای یافتن فونت مد نظر جستجو می شود  و چنانچه چنین فونتی یافته شود آن فونت  در صفحات وب مورد استفاده قرار خواهد گرفت و اگر هم چنین فونتی روی سیستم عامل کاربر نصب نباشد در عوض فونت پیش فرض مرورگر مورد استفاده قرار خواهد گرفت.
نقطه مقابل فونت های سیستمی فونت ها وب هستند. در واقع فونت های وب این امکان را به برنامه نویس می دهند که هر فونتی را که مد نظر داشتند با استفاده از دستور font-face@ در صفحات وب خود مورد استفاده قرار دهد خواه کاربر آن فونت را روی سیستم خود داشته باشد خواه نداشته باشد. در حقیقت اگر هم کاربر فونت مد نظر را روی سیستم خود نداشته باشد هیچ مشکلی پیش نخواهد آمد چرا که با اتخاذ چنین رویکردی برنامه نویس فونت مد نظر را در کنار دیگر فایل های سایت قرار داده و سی اس اس با دانلود آن ها به استفاده از آن ها خواهد پرداخت.
به منظور به کار گیری از دستورات مرتبط با فونت در سی اس اس (CSS) کد زیر را وارد فایل مرتبط با کدهای سی اس اس (CSS) در نرم افزار ویرایشگر متن خود می کنیم:

body {
       font-family: Times, "Times New Roman", serif;
}

همانطور که در کد فوق می بینیم، برای Selector یی تحت عنوان body قصد داریم تا دستورات تایپوگرافی را مشخص کنیم. اولین Property که در نظر گرفته ایم font-family نام دارد که نوع فونت مد نظر را مشخص می سازد. پس از نوشتن font-family یک علامت : قرار داده سپس نام فونت های مد نظر خود را می نویسیم. همواره به خاطر داشته باشیم که font-family به حروف بزرگ و کوچک حساس است. بنابراین نام Times و times برای این Property دو فونت متفاوت محسوب می شوند و از آنجا که فونتی به نام times نداریم مسلما این فونت را به رسمیت نخواهد شناخت. چنانچه بخواهیم بیش از یک فونت برای این Property در نظر بگیریم بایستی از علامت کاما برای جدا سازی فونت ها از یکدیگر استفاده کنیم. در نهایت یک علامت ; قرار داده تا این Property تکمیل شود. همانطور که در کد فوق ملاحظه می شود فقط فونت Times New Roman داخل دو علامت ”  ” قرار گرفته است و علت آن هم این است که این فونت از بیش یک کلمه تشکیل شده است. بنابراین هر فونتی که بیش از یک کلمه بود را می بایست داخل علامت های ”  ” قرار داد.
به طور کلی برای آشنایی با کلیه مقادیری که برای Property های سی اس اس (CSS) می توان در نظر گرفت، می توان به آدرسhttp://www.w3.org/TR/CSS21/propidx.html مراجعه کرد.
اکنون ببینیم مرورگر زمانیکه با بیش از یک فونت رو به رو می شود کدام گزینه را انتخاب خواهد کرد. به طور کلی همواره اولین فونت از سمت چپ مد نظر قرار داده خواهد شد. اگر آن فونت (Times) یافت شد که مورد استفاده قرار می گیرد و اگر هم یافت نشد مرورگر به سراغ فونت دوم (Times New Roman) می رود و اگر هم این فونت یافت نشد مرورگر به سراغ serif می رود. در این مرحله مروگر به هر فونتی که روی سیستم کاربر نصب شده باشد و از جنس serif باشد رجوع خواهد کرد.
به طور کلی serif نام یک فونت نیست بلکه نام روشی برای طراحی فونت ها است. در مقابل serif فونت های sans-serif قرار دارند. Sans یک کلمه فرانسوی به معنی “بدون” می باشد. حال ببینم که فونتی که بدون serif است چه نوع فونتی است:

serif_vs._sans-serif_fonts

فونتی که در سمت راست قرار دارد یک فونت sans-serif است و فونت سمت چپ هم یک فونت serif است. همانطور که در تصویر فوق مشخص است فونت serif دارای گوشه هایی که فونت sans-serif فاقد آن ها است. معمولاً فونت های serif برای چاپ کتاب مورد استفاده قرار می گیرند و این در حالی است که در تایپوگرافی تحت وب از فونت های sans-serif بیشتر استفاده می شود چرا که خوانایی آن ها روی صفحه مانیتور بیشتر است. اگر بخواهیم مثالی از یک فونت sans-serif بزنیم می توان Helvetica را نام برد و معروف ترین فونت serif هم Times New Roman است. در واقع زمانیکه نام serif را در کدهای سی اس اس (CSS) خود می نویسیم، فونتی از نوع serif که روی سیستم عامل نصب است مورد استفاده قرار خواهد گرفت.
برای روشن شدن تفاوت این دو نوع فوت کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p id="sansSerif">This is a sans-serif font</p>
       <p id="serif">This is a serif font</p>
   </body>
</html>

همانطور که در کد فوق می بینیم دو تگ <p> را مورد استفاده قرار داده ایم به این صورت که برای تگ اول یک id معادل با sansSerif برای برای تگ دوم یک id معادل با serif در نظر گرفته ایم. حال اقدام به نوشتن کدهای سی اس اس (CSS) در فایلی تحت عنوان main.css می نماییم:

#sansSerif {
   font-family: Arial, Helvetica, sans-serif;
}
#serif {
   font-family: Times, Georgia, "Times New Roman", serif;
}

همانطور که در کد فوق ملاحظه می شود برای id مرتبط با sansSerif فونت هایی از جنس sans-serif استفاده می کنیم و برای id مرتبط با serif از فونت های serif استفاده می کنیم. حال فایل خود را داخل مرورگر اجرا می کنیم:

serif_and_sans-serif_fonts

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

 

معرفی Property یی تحت عنوان font-size در سی اس اس (CSS)

برای مشخص کردن اندازه فونت می بایست از Property یی تحت عنوان font-size استفاده کرد:

body {
   font-size: 16px;
}

همانطور که در کد فوق می بینیم Value مرتبط با font-size را برابر با ۱۲px قرار داده ایم. به خاطر داشته باشیم که هیچ فاصله ای مابین px و ۱۲ نمی بایست وجود داشته باشد (منظور از px پیکسل است). در این بخش از آموزش نیاز است تا با مقادیر Fixed یا “ثابت” و Relative یا “نسبی” بیشتر آشنا شویم. منظور از مقادیر ثابت این است که مقدار مد نظر بدون در نظر گرفتن نوع دستگاه همواره ثابت نمایش داده می شود که از آن جمله می توان به px برای پیکسل، in برای اینچ، cm برای سانتیمتر، mm برای میلیمتر، pt برای point و pc برای picas استفاده می شود (منظور از picas یک واحد شمارش است که معادل با ۱۲ point یا تقریباً ۴.۲ میلیمتر است). این واحد های اندازه گیری برای دستگاه هایی همچون پرینترها مناسب هستند که خروجی این دستگاه ها مشخص است و این واحدها را به خوبی می توان استفاده کرد. اما این واحدها برای دستگاه های مختلفی که دارای ابعاد مختلف، تراکم پیکسلی متفاوت و … هستند به خوبی عمل نمی کنند چرا که نتایج دور از انتظاری را مشاهده خواهیم کرد.
مقادیر نسبی که از آن جمله می توان به em اشاره کرد این امکان را به برنامه نویس می دهند تا مقدار در نظر گرفته شده نسبت به اندازه پیش فرض فونت بزرگ یا کوچک شود. این مقادیر برای دستگاه هایی که دارای صفحه نمایش هایی با ابعدا و تراکم پیکسلی مختلف دارند مناسب هستند. برای روشن شدن این مسئله تصویر زیر را مد نظر قرار می دهیم:

px_versus_em

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

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>This is a paragraph</p>
   </body>
</html>

همانطور که می بینیم یک پاراگراف حاوی عبارت This is a paragraph ایجاد کرده ایم. حال با استفاده از کدهای سی اس اس (CSS) قصد داریم اندازه این پاراگراف را به ۲۰ پیکسل تغییر دهیم. برای این منظور کد زیر را وارد فایل main.css می نماییم:

p {
   font-size:20px;
}

پس از باز کردن فایل در مرورگر با نتیجه زیر مواجه خواهیم شد:

units_of_measurement_in_css

حال اندازه فونت را از ۲۰px به ۱em تغییر می دهیم:

p {
   font-size:1em;
}

مجدد فایل خود را داخل مرورگر به روز رسانی می کنیم:

em_unit_of_measurement

در حقیقت اندازه ای که در مرورگر فوق به نمایش در آمده است اندازه پیش فرض نمایش فونت در مرورگر است که به صورت ۱۰۰ درصد کامل به نمایش در آمده است. حال اندازه فونت را از ۱em با ۱.۵em ارتقاء می دهیم:

p {
   font-size:1.5em;
}

مجدد مرورگر را به روز رسانی می کنیم:

em_increase_in_font_size

می بینیم که اندازه فونت به ۱۵۰ درصد اندازه پیش فرض فونت مرورگر افزایش می یابد.

علاوه بر مقادیر فوق الذکر برای font-size می توان مقادیری همچون xx-large، x-large، large، medium، small، x-small، xx-smal در نظر گرفت.

 

معرفی Property یی تحت عنوان font-weight در سی اس اس (CSS)

برای آنکه بتوانیم فونت خود را به صورت Bold به نمایش در آوریم می بایست از Property یی تحت عنوان font-weight استفاده کنیم. مقادیر زیادی را برای این Property می توان در نظر گرفت اما رایج ترین آنها عبارتند از normal و bold.
برای مشاهده تاثیر هر یک از Value های فوق، کد زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="/css/main.css">
   </head>
   
   <body>
       <p id="normal">This is a paragraph</p>
       <p id="bold">This is a paragraph</p>
   </body>
</html>

همانطور که در کد فوق ملاحظه می شود از دو تگ پاراگراف استفاده کرده ایم که برای تگ اول یک id معادل با normal و برای تگ دوم یک id معادل با bold در نظر گرفته ایم. حال اقدام به نوشتن کدهای سی اس اس (CSS) می کنیم:

#normal {
   font-weight:normal;
}
#bold {
   font-weight:bold;
}

برای id مرتبط با normal مقداری font-weight را برابر با normal قرار داده ایم و برای id مرتبط با bold مقدار آن را برابر با bold قرار داده ایم. حال اقدام به اجرای فایل خود در مرورگر می کنیم:

css_font-weight

همانطور که در تصویر فوق مشخص است پاراگراف اول به صورت عادی و پاراگراف دوم به صورت bold نمایش داده شده است.
علاوه بر دو Value فوق می توان مقادیر bolder، lighter، inherit، ۱۰۰، ۲۰۰، ۳۰۰، ۴۰۰، ۵۰۰، ۶۰۰، ۷۰۰، ۸۰۰,۹۰۰ را در نظر گرفت.
لازم به ذکر است که مقدار bolder کمی از مقدار bold ضخیم تر است، مقدار lighter کمی از normal نازک تر است است و مقادیر ۱۰۰ تا ۹۰۰ کاراکترها را از نازک تا ضخیم به نمایش در می آورد به طوریکه مقدار ۴۰۰ معادل با normal و مقدار ۷۰۰ معادل با bold است. مقدار inherit هم مقدار مرتبط با font-weight را از Element والد یا پدر به ارث می برد. به عبارت دیگر از font-weight را در body تعریف کرده باشیم، از آنجا که p زیر مجموعه body است یا به عبارتی فرزند body است، از اینرو مقدار font-weight را از body ارث بری خواهد کرد.

 

معرفی Property یی تحت عنوان font-style در سی اس اس (CSS)

این Property می تواند Value های normal، italic، oblique و inherit را داشته باشد. برای روشن شدن تاثیر این Property کدهای اچ تی ام ال (HTML) زیر را وارد ویراشگر متن می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p id="normal">This is a paragraph</p>
       <p id="italic">This is a paragraph</p>
       <p id="oblique">This is a paragraph</p>
   </body>
</html>

می بینیم که در کد فوق سه پاراگراف ایجاد کرده ایم و برای هر یک از آن ها یک id در نظر گرفته ایم. حال اقدام به نوشتن کدهای سی اس اس (CSS) خود می کنیم:

#normal {
   font-style:normal;
}
#italic {
   font-style:italic;
}
#oblique {
   font-style:oblique;
}

همانطور که در کد فوق می بینیم، نام id ها را مرتبط با مقادیر مختلف font-style قرار داده ایم. حال فایل خود را در مرورگر اجرا می کنیم:

font-style_in_css

می بینیم که پاراگراف اول به صورت عادی به نمایش در آمده و پاراگراف دوم هم به صورت ایتالیک نمایش داده شده است. پاراگراف سوم در ظاهر همانند ایتالیک به نظر می رسد اما این در حالی است که تا حدودی متفاوت است. در حقیقت زمانی یک فونت oblique است که همان فونت نرمال چند درجه به سمت راست خم شود اما این در حالی است که در حالت ایتالیک برای زیباتر به نظر رسیدن فونت فاصله ها و تا حدودی چیدمان کاراکترها تغییر می یابد. برای روشن شدن این مطلب تصویر زیر را مد نظر قرار می دهیم:

the_difference_between_oblique_and_italic

همانطور که می بینیم در خط اول یک فونت نرمال می بینیم. در خط دوم نوع فونت ایتالیک است و می بینیم که فاصله کاراکترها کمتر شده است اما در خط سوم نوع فونت oblique است. اگر این نوع فونت را با ایتالیک مقایسه کنیم می بینیم که oblique همان فونت نرمال است که تا حدودی کج نوشته شده است.
علاوه بر مقادیر فوق الذکر مقدار inherit را هم می توان برای font-style در نظر گرفت که پیش از این نوع عملکرد آن توضیح داده شده است.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان