درخواست های ارتباط
جستجو
لیست دوستان من
صندوق پیام
همه را دیدم
  • در حال دریافت لیست پیام ها
صندوق پیام
رویدادها
همه را دیدم
  • در حال دریافت لیست رویدادها
همه رویدادهای من
دوره های مرتبط
دوره آموزشی ساخت ربات تلگرام
مدرس: taghandiki
این دوره را در 8 قسط خریداری کنید
ساخت و مدیریت ربات تلگرام از صفر با زبان سی شارپ
مدرس: مهدی عادلی
این دوره را در 2 قسط خریداری کنید
دوره آموزشی مقدماتی برنامه نویسی به زبان سی شارپ
مدرس: حسین احمدی
این دوره را در 17 قسط خریداری کنید
دوره آموزشی پردازش متن با زبان برنامه نویسی پایتون
مدرس: taghandiki
این دوره را در 20 قسط خریداری کنید
دوره آموزشی برنامه نویسی حرفه ای پایتون به زبان ساده
مدرس: حسین احمدی
این دوره را در 23 قسط خریداری کنید
دوره آموزشی برنامه نویسی اندروید با زبان جاوا به زبان ساده
مدرس: مهدی عادلی
این دوره را در 27 قسط خریداری کنید
دوره آموزشی طراحی رابط کاربری با JavaFX
مدرس: hharddy
این دوره را در 13 قسط خریداری کنید
دوره آموزشی برنامه نویسی به زبان پرل بصورت پروژه محور
مدرس: dr-iman
این دوره را در 13 قسط خریداری کنید
دوره آموزشی مقدماتی برنامه نویسی جاوا به زبان ساده
مدرس: مهدی عادلی
این دوره را در 17 قسط خریداری کنید
دوره آموزشی Exploit نویسی به زبان Perl
مدرس: dr-iman
این دوره را در 7 قسط خریداری کنید

آموزش CSS: این جلسه : فونت ها در CSS

0 نظرات
49 بازدیدها
Image


ضمن عرض سلام و احترام خدمت تمامی کاربران فروم محبوب توسینسو

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

در این قسمت به شما آموزش می دهیم چطور فونت محتواها را در یک صفحه html تنظیم کنید. برای تنظیم فونت ها می توانید از ویژگی های زیر در CSS استفاده کنید:

با استفاده از ویژگی font-family می توان خانواده فونت را مشخص کرد. به عنوان مثال فونت ایران سنس.
با استفاده از ویژگی font-style می توان فونت را به صورت ایتالیک، نرمال و ابلیک تنظیم کرد.
ویژگی font-variant برای ساخت ایفکت های small-caps استفاده می شود.
ویژگی font-weight برای تعیین کردن میزان بولد بودن و لایت بودن ظاهر نوشته ها استفاده می شود.
ویژگی font-size برای افزایش و کاهش سایز فونت ها مورد استفاده قرار می گیرد.
ویژگی font برای تعیین موارد بالا به صورت یکجا مورد استفاده قرار می گیرد.
1. تنظیم خانواده فونت
مثالی که در ادامه ذکر می شود به شما نشان می دهد که چگونه خانواده فونت محتوا را تنظیم کنید:

<html>
   <head>
   </head>
   <body>
      <p style="font-family:georgia,garamond,serif;">
      This text is rendered in either georgia, garamond, or the default serif font 
      depending on which font  you have at your system.
      </p>
   </body>
</html>



2. تنظیم سبک فونت

در مثال زیر یاد می گیرید که چگونه سبک یک فونت را تنظیم کنید. برای ویژگی font-style سه ویژگی normal ، italic و oblique می توانید تنظیم کنید.

<html>
   <head>
   </head>
   <body>
      <p style="font-style:italic;">
      This text will be rendered in italic style
      </p>
   </body>
</html>




3. تنظیم ویژگی font-variant


در مثال زیر می آموزید که چگونه برای ویژگی font-variant مقدار قرار دهید. مقادیر ممکن برای این ویژگی عبارتند از normal و small-caps.

<html>
   <head>
   </head>
   <body>
      <p style="font-variant:small-caps;">
      This text will be rendered as small caps
      </p>
   </body>
</html>
نتیجه کد بالا به صورت زیر خواهد بود:


4. تنظیم وزن فونت
در مثال بعد به شما یاد می دهیم که وزن فونت را برای یک تگ تنظیم کنید.ویژگی font-weight این قابلیت را برای شما فراهم کرده است که تعیین کنید(این قسمت را در مقاله آموزش HTML از 0 تا 100 طراحی قالب حرفه ای جهت ورود به بازار کار بررسی خواهیم کرد) یک فونت چقدر بولد باشد. مقادیر ممکن برای این ویژگی عبارتند از : normal ، bold ، bolder ، lighter ، 100 ، 300، 400 ، 500 ، 600 ، 700 ، 800 و 900 .

<html>
   <head>
   </head>
   <body>
      <p style="font-weight:bold;">This font is bold.</p>
      <p style="font-weight:bolder;">This font is bolder.</p>
      <p style="font-weight:500;">This font is 500 weight.</p>
   </body>
</html>




5. تنظیم اندازه فونت

در مثالی که در ادامه می آوریم به شما یاد می دهیم که اندازه یک فونت را چگونه تنظیم کنید.مقادیر ممکن برای این ویژگی عبارتند از xx-small ، x-small ، small ، medium ، large ، x-large ، xx-large ، smaller ، larger و اندازه به پیکسل یا درصد.

Image


<html>
   <head>
   </head>
   <body>
      <p style="font-size:20px;">This font size is 20 pixels</p>
      <p style="font-size:small;">This font size is small</p>
      <p style="font-size:large;">This font size is large</p>
   </body>
</html>



6. تنظیم ویژگی font size adjust

در ادامه با یک مثال به شما نشان می دهیم که چگونه اندازه فونت یک تگ را تعدیل کنید. این ویژگی شما را قادر می سازد که اندازه x-height را تعدیل کنید تا به این طریق فونت ها را خوانا تر کنید. مقادیر ممکن برای این ویژگی هر عددی می تواند باشد.

<html>
   <head>
   </head>
   <body>
      <p style="font-size-adjust:0.61;">
         This text is using a font-size-adjust value.
      </p>
   </body>
</html>



7. تنظیم کشیدگی فونت

در مثال بعد به شما آموزش می دهیم که چگونه کشیدگی فونت یک تگ را تنظیم کنید. این ویژگی به کامپیوتر کاربر بستیگی دارد که آیا ورژن گسترده یا متراکم فونت مورد استفاده قرار گیرد.
مقادیر ممکن برای این ویژگی عبارتند از : normal ، wider ، narrower ، ultra-condensed ، extra-condensed ، condensed ، semi-condensed ، semi-expanded ، expanded ، extra-expanded ، ultra-expanded.

<html>
   <head>
   </head>
   <body>
      <p style="font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer doesn't have a  
         condensed or expanded version of the font being used.
      </p>
   </body>
</html>



8. ویژگی font
شما می توانید از ویژگی font استفاده کرده تا همه ویژگی های فونت را به صورت یکجا تنظیم کنید. به مثال زیر توجه کنید:

<html>
   <head>
   </head>
   <body>
      <p style="font:italic small-caps bold 15px georgia;">
      Applying all the properties on the text at once.
      </p>
   </body>
</html>

ادامه دارد...

مطالب مرتبط

در حال دریافت اطلاعات

نظرات
هیچ نظری ارسال نشده است

    برای ارسال نظر ابتدا به سایت وارد شوید

    arrow