آموزش فونت ها در HTML
آموزش فونت ها در HTML
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش فونت ها در HTML خواهیم پرداخت.
فونت ها نقش بسیار مهمی در ایجاد کاربرپسندتر وب سایت و افزایش خوانایی مطالب دارند. چهره و رنگ فونت کاملاً به رایانه و مرورگری بستگی دارد که برای مشاهده صفحه شما استفاده می شود اما می توانید از تگ <HTML <font برای افزودن سبک، اندازه و رنگ به متن در وب سایت خود استفاده کنید. می توانید با استفاده از تگ <basefont> همه متن های خود را در یک اندازه، صورت و رنگ تنظیم کنید.
برچسب فونت دارای سه ویژگی به نام اندازه، رنگ و چهره برای سفارشی کردن فونت های شما است. برای تغییر هر یک از ویژگی های فونت در هر زمان در صفحه وب خود، به سادگی از تگ <font> استفاده کنید. متنی که در زیر می آید تغییر خواهد کرد تا زمانی که با برچسب </font> بسته شوید. می توانید یک یا همه ویژگی های فونت را در یک تگ <font> تغییر دهید.
توجه- تگ های فونت و basefont منسوخ شده اند و قرار است در نسخه بعدی HTML حذف شوند. بنابراین نباید از آنها استفاده شود ، پیشنهاد می شود از سبک های CSS برای دستکاری فونت های خود استفاده کنید. اما هنوز هم برای یادگیری ، این درس تگ های فونت و basefont را با جزئیات توضیح می دهد.
تنظیم اندازه فونت
با استفاده از ویژگی size می توانید اندازه فونت محتوا را تنظیم کنید. دامنه مقادیر پذیرفته شده از 1 (کوچکترین) تا 7 (بزرگترین) است. اندازه پیش فرض یک فونت 3 است.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Live Demo <!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> |
خروجی
|
1 2 3 4 5 6 7 |
Font size = "1" Font size = "2" Font size = "3" Font size = "4" Font size = "5" Font size = "6" Font size = "7" |
اندازه نسبی فونت
می توانید مشخص کنید که اندازه های بزرگتر یا چند اندازه کوچکتر از اندازه فونت از پیش تعیین شده باید باشد. می توانید آن را مانند <font size = “+ n”> یا <font size = “−n”> مشخص کنید
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>Relative Font Size</title> </head> <body> <font size = "-1">Font size = "-1"</font><br /> <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> </body> </html> |
خروجی
|
1 2 3 4 5 |
Font size = "-1" Font size = "+1" Font size = "+2" Font size = "+3" Font size = "+4" |
تنظیم چهره فونت
با استفاده از ویژگی face می توانید صورت فونت را تنظیم کنید اما توجه داشته باشید که اگر کاربری که صفحه را مشاهده می کند فونت را نصب نکند ، دیگر قادر به دیدن آن نیست. در عوض کاربر صورت فونت پیش فرض قابل استفاده برای رایانه کاربر را مشاهده خواهد کرد.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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> |
خروجی
|
1 2 3 4 5 |
Times New Roman Verdana Comic Sans MS WildWest Bedrock |
مشخص کردن چهره های فونت جایگزین
بازدیدکننده فقط در صورتی می تواند فونت شما را ببیند که آن فونت را در رایانه خود نصب کرده باشد. بنابراین، می توان با ذکر نام چهره های فونت، با یک ویرگول ، دو یا چند گزینه چهره قلم را مشخص کرد.
|
1 2 |
<font face = "arial,helvetica"> <font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console"> |
وقتی صفحه شما بارگیری می شود ، مرورگر آنها اولین چهره فونت موجود را نمایش می دهد. اگر هیچ یک از قلم های داده شده نصب نشده باشد ، قلم پیش فرض Times New Roman را نمایش می دهد.
تنظیم رنگ فونت
با استفاده از خصیصه color می توانید هر رنگ فونت را که دوست دارید تنظیم کنید. می توانید رنگ مورد نظر خود را با نام رنگ یا کد هگزادسیمال برای آن رنگ تعیین کنید.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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> |
خروجی
|
1 2 |
This text is in pink This text is red |
عنصر <basefont>
عنصر <basefont> قرار است اندازه، رنگ و نوع فونت پیش فرض را برای هر قسمت از سند که در غیر این صورت در تگ <font> وجود ندارد تنظیم کند. می توانید از عناصر <font> برای لغو تنظیمات <basefont> استفاده کنید.
تگ <basefont> از ویژگی های رنگ، اندازه و چهره نیز برخوردار است و با دادن مقدار 1+ برای اندازه بزرگتر یا 2 − برای دو اندازه کوچکتر، از تنظیم نسبی فونت پشتیبانی می کند.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!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> |
خروجی
|
1 2 3 4 5 6 |
his is the page's default font. Example of the <basefont> Element This is darkgray text with two sizes larger It is a courier font, a size smaller and black in color. |
لیست جلسات قبل آموزش HTML
-
- معرفی HTML
- نگاهی کلی به HTML
- آموزش تگ های پایه در HTML
- آموزش عناصر در HTML
- مفهوم ویژگی ها در HTML
- آموزش قالب بندی در HTML
- آموزش تگ های عبارت در HTML
- آموزش متا تگ ها در HTML
- آموزش کامنت ها در HTML
- تصاویر در HTML
- آموزش جداول در HTML
- آموزش لیست ها در HTML
- آموزش لینک های عکس در HTML
- آموزش لینک های ایمیل در HTML
- آموزش فریم ها در HTML
- آموزش Iframes در HTML
- آموزش بلوک در HTML
- آموزش پس زمینه در HTML
- آموزش رنگ ها در HTML
.svg)
دیدگاه شما