نحوه استایل دهی به فونت در CSS

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

در آموزش زیر به سوالات زیر پاسخ می دهیم:

  • چطور فونت در CSS تعریف کنیم؟
  • چطور به فونت ها استایلی که دوست داریم بدهیم؟
  • چطور فاصله بین خطوط یک پاراگرافرا تنظیم کنیم؟
  • چطور فونت دلخواه خود را اضافه کنیم؟
  • و…

با ما همراه باشین  ;-) 

Font-family

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

 خب شاید فکر کنید که این خاصیت فقط با یک فونت مقدار دهی شود!!! ولی این فکر نادرست است چرا که می توانیم چندین فونت به صورت لیستی به این خاصیت بدهیم .مرورگر فونتی را از این لیست برای اعمال روی محتوا انتخاب می کند که اولا الویت بالاتری دارد یعنی زودتر نوشته شده باشد دوما این فونت برای مرورگر در دسترس باشد.(قابل دانلود یا پیشفرض نصب باشد) مثلا:

font-family: WYekan, Tahoma, Arial;

چند نکته مهم

  • نام فونت ها اگر یک کلمه ای باشند بدون کوتیشن یا دابل کوتیشن نوشته می شود ولی اگر نام فونت ها چند کلمه ای باشد یا دارای عدد یا کاراکتر خاصی باشد باید حتما با کوتیشن یا دابل کوتیشن نوشته شود.
  • بهتر است در انتهای لیست فونت هایی که برای این خاصیت در نظر می گیریم ، از یکی از فونت های زیر استفاده شود تا در صورتی که مرورگر دسترسی به هیچ کدام از فونت هایی که تعریف کردیم نداشت از فونت پشتیبان استفاده کند. توجه کنید برای فونت های زیر از کوتیشن یا دابل کوتیشن استفاده نمی شود.
    • serif
    • sans-serif
    • cursive
    • fantasy
    • monospace

font-family: “New Century Schoolbook”, sans-serif;


Font-size

با این خاصیت می توانیم سایز فونت در CSS را مشخص کنیم.

این خاصیت مقادیر متفاوتی می گیرید (مطلق و نسبی)

سایز مطلق به دو صورت می باشد:

  • واحدهای مطلق:  شامل واحدهای in، cm، mm، pt، pc و px می باشد.
  • کلمات کلیدی : xx-small  ، x-small ،small، medium،large،x-large،xx-large

سایز نسبی یعنی نسبت به والد المان تعیین می شود:

  • واحدهای نسبی:  em، rem،ex
  • کلمات کلیدی :larger،smaller
  • استفاده از درصد

نکته: سایز فونت هر المان با سایز والد آن المان برابر است مگر اینکه سایز به صورت مستقیم برای المان فرزند تعریف شود.

ما در این دوره آموزشی از  px استفاده می کنیم و توضیح تک تک این مقادیر گسترده می باشد و در این آموزش نمی گنجد.

font-size:18px;


font-style

با استفاده از این خاصیت می توانیم استایل فونت در CSS را مشخص کنیم .

  • Italic
  • Oblique

نکته: در صورتی که فونتی که برای font-family در نظر گرفته اید استایل در نظر گرفته شده برای font-style را نداشته باشد مرورگر به صورت خودکار از مقدار دوم استفاده می کند مثلا مقدار Italic را به font-style داده باشیم ولی فونت این مقدار را نپذیرد مرورگر به صورت خودکار مقدار oblique را در نظر می گیرد. حال اگر هر دو مقدار برای فونت تعریف نشده باشد مرورگر همان فونت را با کمی استایل شیب دار نمایش می دهد.


font-weight

با کمک این خاصیت می توانیم وزن یا ضخامت فونت را مشخص کنیم.

این خاصیت مقادیر متفاوتی می پذیرد (به صورت عددی یا کلمه کلیدی) که به چند نمونه اشاره می کنیم:

  • Normal مترادف عدد 400
  • Bold مترادف عدد 700
  • یکی از اعداد بین 100 تا 900
  • Bolder و lighter این دو مقدار با توجه به ضخامت المان والد تعیین می شوند.

اکثر فونت ها تمام ضخامت ها را نمی پذیرند بنابراین اگر فونتی که برای font-family در نظر گرفته اید ضخامتی که به font-weight می دهید را نپذیرد چه اتفاقی می افتد؟ مرورگر نزدیکترین ضخامت به مقداری که در نظر گرفته اید را انتخاب می کند.


line-height

اگر محتوای یک المان به صورت چند خطی باشد با این خاصیت می توانیم فاصله خطوط را مشخص کنیم.

مقادیر این ویژگی به سه صورت می باشد:

  • کلمه کلیدی normal (مرورگر فاصله خطوط را تعیین می کند)
  • مقادیر طولی با واحد (px، em،rem و …)
  • مقدار درصدی
  • عدد بدون واحد

پیشنهاد می شود از مقادیر عددی بدون واحد استفاده کنید.


font-stretch

خاصیت font-stretch این امکان را فراهم می کند تا حالت های مختلف یک فونت بر اساس عرض کاراکترها تعیین کنیم.خیلی کاربردی نیست، فقط محض اطلاع.


font-variant

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

  • small-caps : حروف بزرگ با اندازه کوچک تر از حالت معمولی نمایش داده شوند.
  • inherit : استایل پدر یا اجداد خود را به ارث می برد.پ
  • normal : مقدار پیش فرض می باشد.

در مثال زیر خیلی ساده از خصوصیاتی که تعریف کردیم استفاده می کنیم.

نتیجه اجرای کد هم به شکل زیر می باشد:

فونت در CSS | مثال


font

حالا می خواهیم یک خاصیت به نام  font در css معرفی کنیم که تمام خصوصیات بالا در آن جمع شده است .

فونت در CSS | خصوصیت font

نکته: دانستن چند نکته در استفاده از خاصیت font مهم است :

  • در صورتی که از این خاصیت استفاده کنیم و برای هر کدام از خصوصیات بالا مقدار تعیین نکنیم خصوصیت مقدار دیفالت خود را می گیرد. مثلا اگر برای font-style مقدار تعیین نکنیم حتی اگر قبلا به صورت جداگانه مقدار گرفته باشد ولی به مقدار دیفالت یعنی normal ریسیت می شود.
  • استفاده از دو مقدار font-family و font-size برای این خاصیت ضروری است در صورتی که استفاده نشود این خاصیت نامعتبر است.
  • ترتیب سه خاصیت اول یعنی font-style، font-variant و font-weight مهم نیست فقط باید قبل از font-size باشند.
  • در صورت استفاده از خاصیت line-height باید حتما بعد از font-size و با اسلش استفاده شود.

توجه داشته باشید این خصوصیت font در css کلمات کلیدی تکی هم می گیرید که باعث می شود استفاده از فونت های سیستم عامل با تمام ویژگی هایش برای ما فراهم شود مثلا :

  • font:menu : در این حالت تمام ویژگی که سیستم عامل برای نوشتن فونت منو استفاده می کند برای ما فراهم می شود.
  • font:icon : این مربوط به فونت برچسب آیکون هاست.
  • font:caption  : این مربوط به دکمه ها و منوهای drop-down می باشد.
  • font: message-box : این مربوط به باکس ها می شود.
  • font:status-bar  :این مربوط به نوار وضعیت پنیجره ها می شود.

در آموزش های جلوتر که یک صفحه طراحی کردیم از این خصوصیت استفاده می کنیم پس از زدن مثال برای خاصیت font صرف نظر می کنیم.

امیدوارم آموزش نحوه استایل دهی به فونت در CSS برای شما مفید واقع شده باشد.برای کسب اطلاعات بیشتر می توانید به این لینک مراجعه کنید.

خلاصه جلسه امروز به شرح زیر می باشد:

خصوصیات
ناممقادیر
توضیح
font-familyفونتتعیین نوع فونت المان
font-sizeمطلق  یا  نسبیتعیین اندازه فونت
font-styleoblique و  Italicتعیین استایل فونت
font-weightکلمه کلیدی یا عددیتعیین ضخامت فونت
line-heightکلمه کلیدی،درصدی،مقدار طولی،عدد بدون واحدتعیین فاصله خطوط
font-stretchکلمات کلیدیتعیین عرض کاراکترها
font-variant normal، small-caps ، inheritتعیین حروف بزرگ و کوچک

 

باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید  ;-) 

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 1 امتیاز: 5]