فرادرسآموزش تغییر فونت در HTML – به زبان ساده و با مثال
هنگام طراحی وب‌سایت توجه به جنبه تایپوگرافی و فونت مناسب از اهمیت ویژه‌ای برخوردار است و اینجاست که موضوع آموزش تغییر فونت در HTML اهمیت پیدا میکند. بسته به برند خود، باید فونت، اندازه و رنگ فونت متناسبی را برای افزایش تجربه کاربری بهتر انتخاب کرد. نوع و اندازه فونت در نگاه اول نقش مهمی در ایجاد تجربه کاربری مناسب دارد. در این مطلب از «مجله فرادرس»، نحوه تغییر اندازه فونت در HTML، نحوه تغییر اندازه فونت در پاراگرافی خاص، نحوه تغییر رنگ فونت در HTML و در نهایت نحوه تغییر فونت در یک divدر HTML و اهمیت این موضوع‌ها را با ذکر مثال‌هایی کاملاً عملی مورد بررسی قرار خواهیم داد.
تغییر فونت در HTML
فونت‌ها را در HTML از رویکردهای مختلفی میتوان دستکاری کرد. برای مثال میتوان نوع فونت را تغییر داد و فونت مناسب با برند خود را جایگزین آن کرد یا میتوان اندازه فونت را کوچک یا بزرگ کرد یا میتوان رنگ آن را به رنگ مناسب‌تری تغییر داد. همچنین میتوان این تغییرات را فقط برای بخش خاصی از متن لحاظ کرد که در ادامه به تمامی این تکنیکهای تغییر فونت در اچ تی ام ال خواهیم پرداخت.
تغییر نوع فونت در HTML
تغییر نوع فونت در HTML برای سفارشی کردن ظاهر متن در صفحه وب ضروری است. برای انجام این کار فقط با استفاده از HTML، از ویژگی CSS font-familyاستفاده می‌شود. این ویژگی به کاربران امکان میدهد فونتی را که می‌خواهند استفاده کرده و آن را در ویژگی styleقرار دهند. سپس این ویژگی styleبه نوعی عنصر HTML مانند پاراگراف، عنوان، دکمه یا تگ spanاضافه می‌شود. اگرچه این روش شامل افزودن کد مستقیم به فایل HTML است، اما در واقع از CSS استفاده میکند که این کار تغییر فونت در HTML با استفاده CSS درون‌خطی شناخته می‌شود. CSS درون‌خطی به این معنی است که هر دو HTML و CSS در قسمت بدنه سند HTML با هم قرار می‌گیرند.
برای درک بهتر این موضوع مثالی ارائه خواهیم کرد. فرض کنید می‌خواهیم نوع فونت پاراگراف را به فونت «وزیرمتن» (Vazirmatn) تغییر دهیم. برای این هدف میتوان نوعی ویژگی styleبه عنصر پاراگراف اضافه کرده و ویژگی font-familyرا به عنوان IRANSansمشخص کرد. این تغییر فقط بر پاراگراف با ویژگی styleتأثیر می‌گذارد و پاراگراف‌ها و سرفصل‌های دیگر را با فونت پیش‌فرض خود، در صفحه باقی می‌گذارد.
1<!DOCTYPE html>
2<html dir="rtl">
3<head>
4<title>HTML CSS JS</title>
5</head>
6<body>
7<h2>نحوه تغییر فونت با استفاده از سی اس اس داخلی</h2>
8<p style="font-family: Vazirmatn">به این مطلب آموزشی از مجله فرادرس خوش آمدید. فونت این پاراگراف با استفاده از ویژگی استایل به وزیرمتن تغییر داده شده است.</p>
9<h3>توضیحات</h3>
10<p>در این مطلب نحوه تغییر نوع فونت در اچ تی ام ال، آموزش داده خواهد شد. فونت این پاراگراف پیش فرض است.</p>
11</body>
12</html>در حالی که CSS درون‌خطی می‌تواند برای استایل دادن به عناصر فردی مفید باشد، به طور کلی توصیه می‌شود از روش‌های دیگری مانند CSS خارجی برای این هدف استفاده شود. CSS خارجی شامل قرار دادن کد CSS مد نظر در فایل CSS جداگانه است که سپس به سند HTML پیوند داده می‌شود. این رویکرد عمل بهتری در نظر گرفته می‌شود زیرا به کاربر امکان میدهد قوانین سبک‌دهی یکسانی را بدون تکرار کد به چندین عنصر اعمال کند.
به عنوان مثال، اگر کاربری بخواهد فونت همه پاراگراف‌ها را به IRANSansتغییر دهد، می‌تواند از انتخابگر CSS مانند pبرای هدف قرار دادن تمام عناصر پاراگراف استفاده کند. به این ترتیب، نیازی به اضافه کردن ویژگیهای styleبه هر پاراگراف نیست. قطعه کد مثال گفته شده به صورت زیر است:
1<!DOCTYPE html>
2<html dir="rtl">
3<head>
4<title>HTML CSS JS</title>
5</head>
6<body>
7<h2>نحوه تغییر فونت با استفاده از سی اس اس داخلی</h2>
8<p style="font-family: Vazirmatn">به این مطلب آموزشی از مجله فرادرس خوش آمدید. فونت این پاراگراف با استفاده از ویژگی استایل به وزیرمتن تغییر داده شده است.</p>
9<h3>توضیحات</h3>
10<p>در این مطلب نحوه تغییر نوع فونت در اچ تی ام ال، آموزش داده خواهد شد. فونت این پاراگراف پیش فرض است.</p>
11</body>
12</html>همچنین قطعه کد بخش CSS این مثال به صورت زیر است:
1p {
2 font-family: Vazirmatn;
3}در نهایت خروجی این مثال با مثال بالا یکسان است.
تغییر اندازه فونت در HTML
یکی دیگر از جنبه‌های تغییر فونت در HTML، تغییر اندازه آن است. برای تنظیم اندازه فونت در HTML، از ویژگی CSS font-sizeاستفاده می‌شود. این ویژگی به کاربر امکان میدهد اندازه فونت را مشخص کرده و آن را در ویژگی styleقرار دهد. سپس این ویژگی styleبه عنصر HTML مانند پاراگراف، عنوان، دکمه یا تگ spanاضافه می‌شود.
به عنوان مثال، فرض بر این است می‌خواهیم اندازه فونت نوعی پاراگراف را به ۲۶ پیکسل تغییر دهیم. میتوان نوعی ویژگی styleبه عنصر پاراگراف اضافه کرد و ویژگی اندازه فونت را روی ۲۶ پیکسل قرار داد. این تغییر فقط بر پاراگراف با ویژگی styleتأثیر می‌گذارد و سایر پاراگراف‌ها و هدینگ‌ها را در اندازه‌های پیش‌فرض خود باقی می‌گذارد.
1<!DOCTYPE html>
2<html dir= "rtl">
3<head>
4<title>HTML CSS JS</title>
5</head>
6<body>
7<h2>نحوه تغییر اندازه فونت با استفاده از سی اس اس داخلی</h2>
8<p style="font-size: 26px">به این مطلب آموزشی از مجله فرادرس خوش آمدید. اندزه فونت این پاراگراف با استفاده از ویژگی استایل به 20 پیکسل تغییر داده شده است .</p>
9
10<h3>توضیحات</h3>
11<p>در این مطلب نحوه تغییر اندازه فونت در اچ تی ام ال، آموزش داده خواهد شد. اندازه فونت این پاراگراف پیش فرض است.</p>
12</body>
13</html>همچنین میتوان خروجی مثال بالا را با استفاده از CSS خارجی نیز به دست آورد. برای این هدف کافی است انتخابگر زیر را در قطعه کد CSS مربوطه قرار دهیم:
1 p {
2 font-size: 26px;
3 }تغییر اندازه فونت بخش خاصی از پاراگراف
CSS کنترل دقیقی بر روی کدهای کاربر ارائه میدهد و به او امکان خواهد داد اندازه‌های مختلف فونت را در پاراگرافی خاص اعمال کنند. اگر کاربری بخواهد اندازه فونت پیش‌فرض پاراگراف را حفظ کرده و در عین حال اندازه متن خاصی را در آن تغییر دهد، می‌تواند با قرار دادن متن مورد نظر در تگ‌های spanبه این امر دست یابد. به عنوان مثال، برای تنظیم اندازه متن خاص در پاراگراف، باید آن متن را در تگ‌های spanقرار داد. سپس، ویژگی styleبه عنصر spanاضافه کرده و ویژگی اندازه فونت را با مقدار دلخواه مشخص کرد.
1<!DOCTYPE html>
2<html dir= "rtl">
3<head>
4<title>HTML</title>
5</head>
6<body>
7<h2>نحوه اندازه تغییر بخش خاصی از متن</h2>
8<p>به این مطلب آموزشی از مجله فرادرس خوش آمدید. <span style="font-size: 26px">مجله فرادرس</span> آموزش های زیادی در زمینه HTML ارائه داده است. </p>
9
10<h3>توضیحات</h3>
11<p>اندازه عادی فونت در این صفحه ١٦ پیکسل است. واژه مجله فرادرس در پاراگراف بالا اندازه بیشتری دارد.</p>
12</body>
13</html>خروجی مثال فوق به صورت زیر است:
استفاده از CSS خارجی، روند مشابهی را دارد. کاربر می‌تواند متنی را که می‌خواهید اندازه آن را تغییر داده در تگ‌هایspanقرار دهد و می‌تواند نوعی ویژگی IDبه عنصر spanاختصاص دهد. با استفاده از این شناسه، میتوان از انتخابگر شناسه CSS برای تنظیم اندازه فونت متن خاص استفاده کرد. مثال زیر برای بیان این هدف است:
1<!DOCTYPE html>
2<html dir= "rtl">
3<head>
4<title>HTML</title>
5</head>
6<body>
7<h2>نحوه تغییر اندازه بخش خاصی از متن</h2>
8<p>به این مطلب آموزشی از مجله فرادرس خوش آمدید. <span id="smaller">مجله فرادرس</span> آموزش های زیادی در زمینه HTML ارائه داده است. </p>
9
10<h3>توضیحات</h3>
11<p>اندازه عادی فونت در این صفحه ١٦ پیکسل است. واژه مجله فرادرس در پاراگراف بالا اندازه بیشتری دارد.</p>
12</body>
13</html>بخش CSS این مثال به صورت زیر است:
1#smaller { font-size: 11px; }خروجی مثال فوق به صورت زیر است:
نحوه تغییر رنگ فونت در HTML
برای تغییر رنگ فونت در HTML، از ویژگی رنگ CSS استفاده خواهد شد. این ویژگی به کاربر امکان میدهد رنگ موردنظر خود را مشخص کرده و آن را در ویژگی style قرار دهد. سپس این ویژگی styleبه نوعی عنصر HTML مانند پاراگراف، عنوان، دکمه یا تگ spanاضافه می‌شود.
به عنوان مثال، فرض کنید می‌خواهیم رنگ فونت پاراگرافی خاص را به رنگی خاص مانند رنگ نارنجی Lorax (کد رنگی هگز #FF7A59) تغییر دهیم. در این رابطه میتوان نوعی ویژگی styleرا به عنصر پاراگراف اضافه کرده و ویژگی رنگ را روی کد هگز دلخواه تنظیم کرد. این تغییر فقط بر پاراگراف با ویژگی styleتأثیر می‌گذارد و سایر پاراگراف‌ها و سرفصل‌های صفحه را با رنگ پیش‌فرض خود (معمولاً سیاه) باقی می‌گذارد.
1<!DOCTYPE html>
2<html dir="rtl">
3<head>
4<title>HTML CSS JS</title>
5</head>
6<body>
7<h2>نحوه تغییر رنگ فونت در اچ تی ام ال</h2>
8<p style="color: #FF7A59">رنگ متن این پاراگراف نارنجی است و با ویژگی استایل و رنگ تغییر داده شده است.</p>
9
10<h3>توضیحات</h3>
11<p>رنگ متن این پاراگراف در حالت پیش فرض و سیاه است.</p>
12</body>
13</html>خورجی مثال بالا به صورت زیر است:
همچنین همین کار را میتوان با استفاده از CSS خارجی انجام داد که برای این هدف کافی است فقط کد زیر را در فایل CSS مربوطه درج کرد.
1p {
2color: #FF7A59;
3}با این کار این بار کل پاراگراف‌ها نارنجی رنگ خواهند شد.
نحوه تغییر فونت در Div خاص
یکی دیگر از موضوعات پیرامون تغییر فونت در HTML، تغییرات فونت در Divهای خاص است که در این بخش از مطلب به آن پرداخته خواهد شد. در اچ تی ام ال، divنوعی عنصر اساسی است که برای تقسیم صفحه وب به بخش‌ها استفاده می‌شود و به کاربر امکان میدهد سبکهای CSS خاصی را برای هر بخش اعمال کند. تغییر فونت در divشبیه به تغییر آن در عناصر دیگر مانند پاراگراف‌ها یا و مابقی عناصر است.
برای سفارشی کردن نوع فونت، اندازه و رنگ متن در صفحه وب خود، می‌تواند متن را در تگ‌های div قرار داد و سپس از CSS برای استایل دادن به آن بخش خاص استفاده کرد. این روش به کاربر این امکان را میدهد که ظاهر متن درون divرا مستقل از سایر قسمت‌های صفحه کنترل کند. مثال زیر برای بیان این هدف است:
1<!DOCTYPE html>
2<html dir="rtl">
3<head>
4<title>HTML CSS JS</title>
5</head>
6<body>
7<h2>نحوه تغییر فونت در دیو خاص</h2>
8
9<div id="example">به مجله آموزشی فرادرس خوش آمدید. نوع فونت و اندازه این بخش از متن تغییر داده شده است.</div>
10
11<h3>توضیحات</h3>
12<p>
13 در این مطلب آموزش تغییر فونت در اچ تی ام ال ارائه شده است.
14</p>
15</body>
16</html>قطعه کد CSS مثال فوق به صورت زیر است:
