اینجا هستید :
خانه آموزش های طراحی وبسایت آموزش CSS آشنایی با خواص font هنگام کار با متن در زبان CSS

آشنایی با خواص font هنگام کار با متن در زبان CSS

آشنایی با خواص font هنگام کار با متن در زبان CSS

همانطور که گفته بودیم در ادامه ی آموزش خواص متعدد از زبان استایل دهی صفحات وب CSS می خواهیم اینبار به سراغ خواص font برویم و شما را در هنگام کار با متن و نوشته در زبان CSS آشنا کنیم.

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

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

سری آموزش های سی اس اس (CSS)

آشنایی با خواص font در کار با نوشته ها

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

معرفی ویژگی های خواص font

خاصیت چند مقداری برای دریافت کلیه ویژگی های قلم نوشته است که هر یک از ویژگی ها باید به ترتیب زیر در خاصیت font وارد شود.

نکته : ترتیب قرار گرفتن خواص در خاصیت های چند مقداری به نوع برنامه طراحی سایت بستگی دارد .

font : [ font-family ] [ font-size ] [ font-style ] [ font-variant ] [ font-weight ]

لیست زیر مجموعه خواص font در CSS را شامل می شود. هر یک را به همراه مثال توضیح داده ایم.

font-family

font-size

font-stretch

font-style

font-variant

font-weight

خاصیت font-family :

خاصیت font-family

نام خاصیت

نوع خاصیت

شرح

font-family

نام قلم

font name

به وسیله این خاصیت می توان از یک لیست آماده ( بر حسب نرم افزاری که برای طراحی صفحات استفاده می کنید ) ، یک قلم را به عنوان قلم نوشته تعیین کنید .

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

مثال : در این بخش مثالی را از font-family را مشاهده می کنید.

خاصیت font-size :

خاصیت font-size

نام خاصیت

نوع خاصیت

شرح

font-size

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
درصد %

به وسیله این خاصیت می توان سایز قلم نوشته را توسط یکی از حالت های زیر تعیین کرد :

– xx-small : اندازه قلم بسیار کوچک است .

x-small : اندازه قلم کمی کوچک است .

small : اندازه قلم کوچک است .

medium : اندازه قلم متوسط است .

large : اندازه قلم بزرگ است .

x-large : اندازه قلم کمی بزرگ است .

xx-large : اندازه قلم بسیار بزرگ است .

larger : اندازه قلم نوشته نسبت به سایر خطوط همجوار کمی بزرگتر است .

smaller : اندازه قلم نوشته نسبت به سایر خطوط همجوار کمی کوچکتر است.

length : در این حالت اندازه قلم نوشته را بر حسب واحدی مثل پیکسل ( px ) و یا نقطه ( pt ) تعیین می کنیم .

درصد % : در این حالت اندازه قلم نوشته را نسبت به عنصر مادر و یا حالت استاندارد ، بر حسب درصد بیان می کنیم .

مثال : در این بخش مثالی را از font-size را مشاهده می کنید. در مثال زیر قسمت های یک پاراگراف با انداره های قلم متفاوت نشان داده شده اند :

خاصیت font-strecth :

نکته : خاصیت font-strecth را به دلیل عدم پشتیبانی مرورگرهای اینترنت اکسپلورر ، Fire Fox و NetScape حذف کرده ایم.

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

خاصیت font-style :

خاصیت font-style

نام خاصیت

نوع خاصیت

شرح

font-style

normal
italic
oblique

از این خاصیت با استفاده از حالت های زیر می توان برای اعمال جلوه های نمایشی به متن استفاده کرد :

– normal : نوشته بدون هیچ جلوه ای نمایش داده می شود ، که انتخاب پیش فرض است.

italic : نوشته به صورت خط کج نمایش داده می شود.

– oblique : نوشته به صورت مورب نمایش داده می شود.

مثال : در این بخش مثالی را از font-style را مشاهده می کنید.

خاصیت font-variant :

خاصیت font-variant

نام خاصیت

نوع خاصیت

شرح

font-variant

normal
small-caps

توسط این خاصیت می توان نوشته را به صورت معمولی ( noraml ) و یا حروف بزرگ ( small-caps ) نمایش داد.

مثال :  در این بخش مثالی را از font-variant را مشاهده می کنید.

خاصیت font-weight :

خاصیت font-weight

نام خاصیت

نوع خاصیت

شرح

font-weight

normal
bold
bolder
lighter
۱۰۰
۲۰۰
۳۰۰
۴۰۰
۵۰۰
۶۰۰
۷۰۰
۸۰۰
۹۰۰

توسط این گزینه می توان میزان ضخامت قلم نوشته را بر حسب یکی از حالت های زیر تعیین کرد :

normal : میزان ضخامت قلم نوشته به صورت معمولی است ، که انتخاب پیش فرض است .

– bold : قلم نوشته به صورت توپر ( ضخیم ) نمایش داده می شود .

bolder : قلم نوشته به صورت خیلی توپر ( ضخیم ) نمایش داده می شود .

lighter : قلم نوشته کمی نازکتر از حالت معمولی نمایش داده می شود .

۱۰۰ تا ۹۰۰ : توسط این مقدارهای عددی می توان میزان ضخامت نوشته را تعیین کرد ، که هر چه عدد بزرگتر باشد ، ضخامت نوشته بیشتر می شود .

مثال :  در این بخش مثالی را از font-variant را مشاهده می کنید.

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

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

مدیریت علاقه دارم در زمینه آموزش های مباحث کامپیوتری و نرم افزاری هر دانش و تجربه ای دارم با کاربران عزیز به اشتراک بزارم... ♥
منتظر نظرات خوب شما هستیم!

هنوز هیچ دیدگاهی وجود ندارد

    • سلام , مهمان