سیستم مدیریت محتواوردپرس

چگونه از CSS برای تغییر فونت در صفحات وب استفاده کنیم

گزینه‌های سبک ساده به شما اجازه می‌دهند با استفاده از برگه سبک آبشاری یک فونت وب را تغییر دهید. برای تنظیم قلم کلمات منفرد، جملات خاص، headlines، مقالات، و حتی کل صفحات متن استفاده کنید.

عکسهای زیر به زمین بازی کد JSFiddle.net اعمال می شوند ، اما مفاهیمی که توصیف می شوند مهم نیست که کد شما در کجا پیاده سازی شده است.

نحوه تغییر قلم با CSS

را در HTML و CSS تغییرات زیر توضیح داده شده با استفاده از هر ویرایشگر HTML و یا ویرایشگر متن .

  1. متن را در محلی که می خواهید قلم را تغییر دهید ، پیدا کنید. ما از این به عنوان مثال استفاده خواهیم کرد:

    این متن به صورت Arial است 
    
  2. متن را با عنصر SPAN احاطه کنید:

    <span> این متن به صورت Arial است </ span>
    
  3. ویژگی style = “” را به برچسب span اضافه کنید:

    <span style = ""> این متن به صورت Arial </span> است
    
  4. در ویژگی style ، قلم را با استفاده از سبک font-family تغییر دهید.

    <span style = "font-family: Arial"> این متن به Arial است </ span>
    
    جون فیر
  5. برای مشاهده تأثیرات ، تغییرات را ذخیره کنید.

نکاتی برای استفاده از CSS برای تغییر قلم

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

    چندین گزینه قلم را با کاما جدا کنید ، مانند این:

    font-family: Arial، Geneva، Helvetica، sans-serif؛ 
    
  • مثالی که در بالا ذکر شد از یک ظاهر طراحی داخلی استفاده می کند ، اما در بهترین نوع یک ظاهر طراحی شده از یک صفحه سبک خارجی استفاده می شود تا چیزی بیش از یک عنصر را تغییر دهد. از کلاس برای تنظیم سبک در بلوک های متن استفاده کنید.

    <div class = "arial"> <p> این متن به صورت Arial است </ p> </div> 
    

    در این مثال ، فایل CSS برای سبک دادن به HTML بالا به صورت زیر ظاهر می شود:

    .arial {font-family: Arial؛ }
    
    جون فیر
  • همیشه سبک های CSS را با یک نقطه ویرگول (؛) پایان دهید. وقتی فقط یک سبک وجود داشته باشد این مورد لازم نیست ، اما شروع آن عادت خوبی است.

نمایش بیشتر

نوشته های مشابه

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

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

دکمه بازگشت به بالا