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

تغییر فونت در صفحات وب با CSS

تغییر فونت در صفحات وب با 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

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

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

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

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

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

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

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

(جهت خردید هاست وردپرسی و دامین به سایت میزبان داده پردیس مراجعه کنید)
نمایش بیشتر

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

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

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