مشاوره رایگان
دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

آموزش تنظیمات فونت در HTML با مثال


فونت ها نقش مهمی در ایجاد یک وب سایت کاربر پسند و افزایش قابلیت خوانایی محتوای یک وب سایت بازی می کنند. ظاهر و رنگ فونت به طور کامل بستگی به رایانه و مرورگری دارد که برای مشاهده صفحه ی وب از آن استفاده می کنید، اما شما می توانید از برچسب  <font> برای اضافه کردن سبک ، اندازه و رنگ به متن، در وب سایت خود استفاده کنید. شما می توانید از برچسب <basefont> برای تنظیم تمام متن محتوا با اندازه، ظاهر و رنگ یکسان استفاده کنید.

 

برچسب فونت دارای سه ویژگی به نام size، color و face برای سفارشی کردن فونت های خود می باشد. شما می توانید برای تغییر هر یک از این ویژگی ها در صفحه وب ، به سادگی از برچسب <font> استفاده کنید.

هر تگ <font> با یک تگ </ font> بسته می شود. و بین این دو تگ محتوایی که قصد نمایش آنرا دارید، قرار داده می شود.

شما می توانید یک یا همه ویژگی های فونت را در یک تگ <font> قرار دهید و آنها را با مقادیر دلخواه، مقداردهی کنید.

 

نکته: تگ های font و basefont تقریبا بی استفاده هستند و قرار است در آینده در نسخه های بعدی از HTML حذف شوند. بنابراین نباید آنها را مورد استفاده قرار دهید، پیشنهاد می شود از استایل دهی CSS برای دستکاری فونت های خود استفاده کنید. اما برای اهداف آموزشی، در این آموزش تگ های font و basefont را به تفصیل شرح خواهیم داد.

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

شما می توانید اندازه فونت محتوا را با استفاده از ویژگی size تنظیم کنید. محدوده مقادیر پذیرفته شده از 1 (کوچکترین) تا 7 (بزرگترین) است. اندازه پیش فرض یک فونت 3 می باشد.

مثال:

<!DOCTYPE html>

<html>



   <head>

      <title>Setting Font Size</title>

   </head>



   <body>

      <font size = "1">Font size = "1"</font><br />

      <font size = "2">Font size = "2"</font><br />

      <font size = "3">Font size = "3"</font><br />

      <font size = "4">Font size = "4"</font><br />

      <font size = "5">Font size = "5"</font><br />

      <font size = "6">Font size = "6"</font><br />

      <font size = "7">Font size = "7"</font>

   </body>



</html>

کد فوق نتیجه زیر را تولید می کند -

نظیم ظاهر فونت

شما می توانید ظاهر فونت را با استفاده از ویژگی face تنظیم کنید اما توجه داشته باشید که اگر کاربر هنگام مشاهده صفحه، فونت مربوطه را روی سیستم خود نصب نکرده باشد ، نمی تواند آن فونت را ببیند. بلکه به جای آن، فونت پیش فرض رایانه خود را می بیند.

مثال:

<!DOCTYPE html>
<html>

 
   <head>
      <title>Font Face</title>
   </head>

 
   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>

 
</html>

کد فوق نتیجه زیر را تولید می کند -

تعیین ظاهر فونت جایگزین

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

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

هنگامی که صفحه شما بارگذاری می شود، مرورگر ، اولین فونت موجود را نمایش می دهد. اگر هیچ یک از فونت های داده شده نصب نشده باشند، بطور پیش فرض، فونت Times New Roman نمایش داده خواهد شد.

تنظیم رنگ قلم

شما می توانید هر رنگ فونتی را که دوست دارید با استفاده از ویژگی color تعیین کنید. شما می توانید به وسیله ی تعیین نام رنگ یا کد هگزادسیمال برای آن رنگ ، رنگ مورد نظر خود را مشخص کنید.

<!DOCTYPE html>
<html>

 
   <head>
      <title>Setting Font Color</title>
   </head>
            
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
            
</html>

کد فوق نتیجه زیر را تولید می کند -

عنصر <basefont>

عنصر <basefont> قرار است یک اندازه، رنگ و نوع فونتِ پیش فرض برای هر بخش از سند که در آن تگ <font> موجود نیست تنظیم کند.اگر شما نمی خواهید از تنظیمات عنصر <basefont> استفاده کنید، می توانید در هر جای سند از عنصر <font> استفاده کنید و تنظیمات دلخواه مانند سایز، رنگ و نوع فونت را به آن قسمت بدهید تا اعمال شود.

تگ <basefont> همچنین دارای ویژگی های color، size و face است و می توان با مقادیری بیشتر از +1  برای داشتن فونت هایی با اندازه بزرگتر یا -2 برای داشتن فونت هایی با اندازه کوچکتر مقدار size فونت را تنظیم نمود.

مثال :

<!DOCTYPE html>
<html>

 
   <head>
      <title>Setting Basefont Color</title>
   </head>
            
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h2>Example of the &lt;basefont&gt; Element</h2>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>

 
      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>
            
</html>

کد فوق نتیجه زیر را تولید می کند -

 

فصلِ: 5 , تعداد قسمت ها: 177 , سطح: صفر تا صد

این فصل در یک نگاه:

در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…

HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می‌…
فصلِ: 3 , تعداد قسمت ها: 25 , سطح: صفر تا صد

این فصل در یک نگاه:

فصل سوم…

آموزش طراحی ریسپانسیو مدرن و جذابتر نسبت به بوتسرپ (همراه با ساخت صفحه اصلی و پنل یک آژانس مسافربری) آموزش پروژه محور فریمورک متریالایز برای اولین بار بین وب سایت های آموزشی آموزش تمامی …
فصلِ: 5 , تعداد قسمت ها: 77 , سطح: متوسط

این فصل در یک نگاه:

ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…

این مجموعه با تلفیقی از فریمورک bootstrap  و کد های html و css  ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ: 11 , تعداد قسمت ها: 162 , سطح: صفر تا صد

این فصل در یک نگاه:

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

در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ: 4 , تعداد قسمت ها: 240 , سطح: صفر تا صد

این فصل در یک نگاه:

طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap  و به صورت تضمینی  و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ: 4 , تعداد قسمت ها: 368 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث تکمیلی فریم ورک لاراول…

فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ: 1 , تعداد قسمت ها: 155 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث مقدماتی فریم ورک react.js…

توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js  و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ: 1 , تعداد قسمت ها: 15 , سطح: متوسط

این فصل در یک نگاه:

رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…

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

تولید شده توسط کلیک سایت

پشتیبانی آنلاین
آماده پاسخگویی هستیم
انتخاب تصویر جهت ارسال:
در حال ضبط صدا

(جهت توقف و یا لغو ضبط از دکمه های زیر استفاده کنید)

توقف و ارسال :
لغو ضبط
در حال حاضر تمامی کارشناسان آفلاین هستند. همواره می توانید با شماره تلگرام / واتساپ 09010005000 به صورت آنلاین با ما در ارتباط باشید. جهت ورود به واتساپ کلیک کنید
0 پیام جدید
پشتیبان در حال تایپ ...
ارسال تصویر ضبط صدا
0 کارشناسان آنلاین می باشند
این گفت و گو توسط پشتیبان به اتمام رسید