درخواست های ارتباط
جستجو
    لیست دوستان من
    صندوق پیام
    همه را دیدم
    • در حال دریافت لیست پیام ها
    صندوق پیام
    رویدادها
    همه را دیدم
    • در حال دریافت لیست رویدادها
    همه رویدادهای من
    اطلاعات مطلب
      مدرس/نویسنده
      8908190
      امتیاز: 304
      رتبه:2872
      0
      1
      0
      0
      دوره های مرتبط
      دوره های توسینسو دوره آموزشی مقدماتی برنامه نویسی جاوا به زبان ساده
      دوره آموزشی مقدماتی برنامه نویسی جاوا به زبان ساده
      مدرس: مهدی عادلی فر
      این دوره را در 17 قسط خریداری کنید
      با خرید این دوره مبلغ 5,445 تومان هدیه بگیرید
      دوره آموزشی اسکریپت نویسی Batch یا Batch Scripting در ویندوز به زبان ساده
      دوره آموزشی اسکریپت نویسی Batch یا Batch Scripting در ویندوز به زبان ساده
      مدرس: حسین احمدی
      این دوره را در 11 قسط خریداری کنید
      دوره آموزشی مقدماتی برنامه نویسی به زبان سی شارپ
      دوره آموزشی مقدماتی برنامه نویسی به زبان سی شارپ
      مدرس: حسین احمدی
      این دوره را در 17 قسط خریداری کنید
      با خرید این دوره مبلغ 8,470 تومان هدیه بگیرید
      دوره آموزشی برنامه نویسی به زبان پرل بصورت پروژه محور
      دوره آموزشی برنامه نویسی به زبان پرل بصورت پروژه محور
      مدرس: ایمان جوادی
      این دوره را در 13 قسط خریداری کنید
      ساخت و مدیریت ربات تلگرام از صفر با زبان سی شارپ
      ساخت و مدیریت ربات تلگرام از صفر با زبان سی شارپ
      مدرس: مهدی عادلی فر
      این دوره را در 2 قسط خریداری کنید
      دوره آموزشی برنامه نویسی WPF در ویژوال استودیو
      دوره آموزشی برنامه نویسی WPF در ویژوال استودیو
      مدرس: امیر حسین فضلیخانی
      این دوره را در 12 قسط خریداری کنید
      دوره آموزشی برنامه نویسی اندروید با زبان جاوا به زبان ساده
      دوره آموزشی برنامه نویسی اندروید با زبان جاوا به زبان ساده
      مدرس: مهدی عادلی فر
      این دوره را در 27 قسط خریداری کنید
      با خرید این دوره مبلغ 8,110 تومان هدیه بگیرید
      دوره آموزشی برنامه نویسی حرفه ای پایتون به زبان ساده
      دوره آموزشی برنامه نویسی حرفه ای پایتون به زبان ساده
      مدرس: حسین احمدی
      این دوره را در 23 قسط خریداری کنید
      با خرید این دوره مبلغ 7,425 تومان هدیه بگیرید
      دوره آموزشی برنامه نویسی پیشرفته زبان سی شارپ
      دوره آموزشی برنامه نویسی پیشرفته زبان سی شارپ
      مدرس: حسین احمدی
      این دوره را در 78 قسط خریداری کنید
      با خرید این دوره مبلغ 82,245 تومان هدیه بگیرید
      دوره آموزشی پردازش متن با زبان برنامه نویسی پایتون
      دوره آموزشی پردازش متن با زبان برنامه نویسی پایتون
      مدرس: کاظم تقندیکی
      این دوره را در 20 قسط خریداری کنید
      با خرید این دوره مبلغ 7,040 تومان هدیه بگیرید
      دوره آموزشی ساخت ربات تلگرام
      دوره آموزشی ساخت ربات تلگرام
      مدرس: کاظم تقندیکی
      این دوره را در 8 قسط خریداری کنید
      دوره آموزشی طراحی رابط کاربری با JavaFX
      دوره آموزشی طراحی رابط کاربری با JavaFX
      مدرس: حسام رسولیان
      این دوره را در 13 قسط خریداری کنید
      دوره آموزشی Exploit نویسی به زبان Perl
      دوره آموزشی Exploit نویسی به زبان Perl
      مدرس: ایمان جوادی
      این دوره را در 7 قسط خریداری کنید
      دوره تخصصی آموزش متن کاوی با ابزار NLTK
      دوره تخصصی آموزش متن کاوی با ابزار NLTK
      مدرس: کاظم تقندیکی
      این دوره را در 11 قسط خریداری کنید

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

      تاریخ 3 ماه قبل
      نظرات 0
      بازدیدها 64
      آموزش CSS: این جلسه : فونت ها در CSS


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

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

      در این قسمت به شما آموزش می دهیم چطور فونت محتواها را در یک صفحه 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 و اندازه به پیکسل یا درصد.

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


      <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