فونت ها در HTML
در این جلسه به آموزش فونت ها زبان کد نویسی HTML خواهیم پرداخت. لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
فونت ها
فونت ها نقش مهمی در زیبا ساختن و خوانا تر کردن وب سایت بازی می کنند. ظاهرو رنگ فونت به طور کامل بستگی به کامپیوتر و مرورگری دارد که استفاده می شود. اما شما می توانید از برچسب <font> در HTML برای افزودن استایل، سایز و رنگ به متن خود در وب سایت استفاده کنید. می توانید از یک برچسب <basefont> برای تنظیم تمام متن خود به اندازه، ظاهر و رنگ یکسان استفاده کنید.
برچسب فونت دارای سه ویژگی به نام های size ،color و face می باشد که فونت شما را به دلخواه در می آورد. برای تغییر هر کدام از ویژگی های فونت در هر زمانی در صفحه ی وب خود، به سادگی از برچسب <font> استفاده کنید. متنی که دنبال می کند، تغییر یافته باقی می ماند تا زمانی که شما آن را با <font/> برچسب ببندید. شما می توانید یکی از ویژگی ها یا همه ی ویژگی های داخل برچسب <font> را تغییر دهید.
نکته
برچسب های font و basefont استفاده نمی شوند و احتمال می رود که در ورژن های بعدی HTML حذف شوند. بنابراین نباید مورد استفاده قرار بگیرند، پیشنهاد می شود که برای اجرای فونت های خود از استایل های CSS استفاده کنید. اما برای رسیدن به هدف این فصل برچسب های font و basefont رابا جزئیات توضیح می دهد.
تنظیم اندازه ی فونت
شما می توانید با استفاده از ویژگی size اندازه فونت محتوا را تنظیم کنید. دامنه ی مقادیر قابل قبول از ۱ کوچکترین تا ۷ بزرگترین می باشد. اندازه ی فونت پیش فرض ۳ می باشد.
مثال
<!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>
اندازه ی فونت مربوط
شما می توانید مشخص کنید چه تعداد از فونت ها بزرگتر و چه تعداد کوچکتر از اندازه ی فونت حاضر باشند.
مثال
<!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>
تنظیم ظاهر فونت
شما می توانید با استفاده از ویژگی 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>
فونت ها در HTML
تعیین ظاهر فونت جایگزین
یک بازدید کننده فقط قادر خواهد بود فونت شما را ببیند، اگر آن را نصب شده روی کامپیوتر خود داشته باشد. بنابراین امکان تعیین دو یا بیشتر از دو ظاهر جایگزین با ارائه ی نام های مربوط به فونت ها وجود دارد.
. <font face="arial,helvetica"> <font face="Lucida Calligraphy,Comic Sans MS,Lucida Console">
اگر هیچکدام از فونت های ارائه شده نصب نشده باشند،
بنابراین فونت پیش فرض Roman New Times نمایش داده خواهد شد.
تنظیم رنگ فونت
شما می توانید با استفاده از ویژگی 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> قرار نمی گیرند، تنظیم کند. شما می توانید از عناصر <font> استفاده کنید تا تنظیمات <basefont> را انجام دهید.
برچسب <basefont> همچنین ویژگی های رنگ، اندازه و ظاهر را می گیرد و با دادن مقدار بیشتر از ۱ + برای فونت های بزرگتر و کمتر از ۲ – برای فونت های کوچکتر، تنظیمات فونت مربوطه را پشتیبانی می کند.
مثال
<!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 <basefont> 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>
ممنون که در این جلسه هم با ما همراه بودید. در این جلسه به یادگیری فونت ها در HTML پرداخته شد. در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت.
پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید.
دیدگاه ها