پیکسلر | شبکه اجتماعی برنامه نویسان

فونت ها

tahlildadeh 2 سال پیش

فونت ها

آموزش طراحی سایت 

فونت ها نقش مهمی در زیبا ساختن و خواناتر کردن وب سایت بازی می کنند. ظاهرو رنگ فونت به طور کامل بستگی به کامپیوتر و مرورگری دارد که استفاده می شود، اما شما می توانید از برچسب < font>در HTML برای افزودن استایل، سایز و رنگ به متن خود در وب سایت استفاده کنید. می توانید از یک برچسب< basefont> برای تنظیم تمام متن خود به اندازه، ظاهر و رنگ یکسان استفاده کنید.
برچسب فونت دارای سه ویژگی به نام های size، color و face می باشد که فونت شکا را به دلخواه در می آورد. برای تغییر هرکدام از ویژگی های فونت در هر زمانی در صفحه ی وب خود، به سادگی از برچسب < 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>

 

اندازه ی فونت مربوط

شما می توانید مشخص کنید چه تعداد از فونت ها بزرگتر و چه تعداد کوچکتر از اندازه ی فونت حاضر باشند. می توانید آن را مانند< font size="+n"> or < font size="-n"> مشخص کنید.

مثال:

نمونه دو

<!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>

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

یک بازدید کننده فقط قادر خواهد بود فونت شما را ببیند، اگر آن را نصب شده روی کامپیوتر خود داشته باشد. بنابراین امکان تعیین دو یا بیشتر از دو ظاهر جایگزین با ارائه ی نام های مربوط به فونت ها وجود دارد.

 

< 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>قرار نمی گیرند، تنظیم کند. شما می توانید از عناصر < font>استفاده کنید تا تنظیمات < basefont> را انجام دهید.
برچسب < basefont> همچنین ویژگی های رنگ، اندازه و ظاهر را می گیرد و با دادن مقدار بیشتر از 1+ برای فونت های بزرگتر و کمتر از 2- برای فونت های کوچکتر، تنظیمات فونت مربوطه را پشتیبانی می کند.

مثال:

نمونه پنج

<!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&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>
0 دیدگاه
برای قرار دادن دیدگاه وارد شوید
مطالب بعدی
profile image
تجهیزات شبکه اکتیو

Networkservices 2 سال پیش

profile image
Firmware چیست ؟

ysorkh.m 2 سال پیش

شما در این سایت آموزشی با مقالات,کتاب,PDF,فیلم های آموزشی رایگان و همین طور دوره آموزش برنامه نویسی به زبان های C#,HTML5,ASP,MVC,SQL,اندروید,React,وردپرس ...

آخرین پست های من
سربرگ HTML 2 سال پیش HTML Marquees 2 سال پیش HTML Embed Multimedia 2 سال پیش فرم های html 2 سال پیش