جستجو برای:
  • صفحه نخست
  • مقالات آموزشی
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
  • قالب رایگان وردپرس
    • قالب فروشگاهی
    • قالب ویژه مشاغل
    • قالب آموزشی
    • قالب پزشکی
    • قالب شرکتی
    • قالب نمونه کار
    • قالب وبلاگی
    • قالب مجله خبری
    • قالب چند منظوره
    • قالب تک صفحه ای
  • افزونه وردپرس
    • آموزش رایگان المنتور
    • آموزش های ووکامرس
  • دوره های آموزشی
    • آموزش کسب درآمد اینترنتی
    • آموزش طراحی سایت با المنتور
    • آموزش جامع وردپرس
    • آموزش فارسی سازی قالب وردپرس
    • آموزش HTML-CSS مقدماتی
    • آموزش ووکامرس مقدماتی
 
افق وب
  • صفحه نخست
  • مقالات آموزشی
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
  • قالب رایگان وردپرس
    • قالب فروشگاهی
    • قالب ویژه مشاغل
    • قالب آموزشی
    • قالب پزشکی
    • قالب شرکتی
    • قالب نمونه کار
    • قالب وبلاگی
    • قالب مجله خبری
    • قالب چند منظوره
    • قالب تک صفحه ای
  • افزونه وردپرس
    • آموزش رایگان المنتور
    • آموزش های ووکامرس
  • دوره های آموزشی
    • آموزش کسب درآمد اینترنتی
    • آموزش طراحی سایت با المنتور
    • آموزش جامع وردپرس
    • آموزش فارسی سازی قالب وردپرس
    • آموزش HTML-CSS مقدماتی
    • آموزش ووکامرس مقدماتی
ورود / عضویت

وبلاگ

افق وب > بلاگ > مقالات آموزشی > برنامه نویسی > HTML-CSS > آموزش رایگان HTML – جلسه 7

آموزش رایگان HTML – جلسه 7

تیر 20, 1400
HTML-CSS, برنامه نویسی

در جلسات قبل در مورد جدول ها, فرم ها و… در HTML صحبت کردیم. در این جلسه قصد داریم به بحث فونت ها در HTML بپردازیم و اطلاعاتی را در این زمینه در اختیار شما قرار دهیم. البته مبحث فونت ها در CSS بسیار گسترده تر است که به آن نیز اشاره خواهیم کرد لذا با ما تا پایان این جلسه همراه باشید.
اگر جلسات قبل آموزش رایگان HTML را نخوانده اید پیشنهاد می کنیم از لینک هایی که در پایان مقاله قرار دادیم استفاده کنید و به ترتیب با جلسات و آموزش های ما در افق وب پیش بروید.

🚀 مراجعه به جلسه 6 آموزش HTML – فرم ها در HTML 🚀

تگ فونت

تگ فونت در HTML چیست؟ چگونه می توانیم این تگ را سفارشی کنیم؟ از تگ های فونت بیشتر در HTML استفاده میشود یا CSS؟ امکان استفاده از فونت فارسی هم وجود دارد؟ و بسیاری سوال های دیگر که در این جلسه قصد داریم به آن ها بپردازیم و اطلاعات کاملی را در این زمینه در اختیار شما قرار دهید.

تگ فونت در HTML این امکان را برای ما فراهم میکند تا اندازه, رنگ, نوع فونت و سایر عواملی که مرتبط با متن است را تغییر دهیم. پس تگ پر کاربردی است که نمی توان به راحتی از کنار آن گذشت.این تگ را میتوانیم در دسته بندی قالب های متن قرار دهیم.

تگ فونت دارای صفت هایی است از جمله؛

صفت color؛ همانطور که مشخص است از این صفت برای تغییر رنگ متن استفاده میشود. رنگ مورد نظر را به عنوان ورودی به تگ متن می دهیم و حاصل تغییر رنگ متن خواهد بود. مثال زیر را ببینید؛

<p>
<font face=’B yekan, Arial,”Times New Roman“‘ color=’ #01b9c6‘ size=’+5‘ >ofoghweb.com : web design</font>
</p>

صفت بعدی تگ فونت صفت size است.

آموزش رایگان html - جلسه 7| فونت ها در html
فونت ها در HTML / تگ فونت

برای تغییر اندازه ی فونت از این صفت استفاده میشود. برای دادن مقدار به این صفت میتوان از گزینه های زیر استفاده کرد؛

  1. مقادیر مطلق که مقدارهایی بین 1 تا 7 هستند.
  2. مقادیر نسبی که بین منفی 7 و مثبت 7 هستند. این مقادیر نسبی نامیده میشوند چون نسبت به اندازه ی فونت مشخص شده در تگ <basefont/> سنجیده میشوند.

صفت آخر, صفت face است. در صورتی که بخواهیم متن مورد نظر را با فونت دلخواه خود نمایش دهیم از این صفت میتوانیم استفاده کنیم. این صفت میتواند لیستی از فونت ها را به عنوان ورودی بپذیرد. دلیل استفاده از چند فونت برای این صفت این است که اگر سیستم مورد نظر فونت اول را نپذیرفت به سراغ فونت های بعدی برود.

فونت ها در HTML5

از زمان معرفی HTML5 عملا سفارشی سازی فونت ها به CSS منتقل شد. در ادامه قصد داریم از سفارشی سازی فونت ها در CSS بپردازیم.
در CSS ویژگی های مختلفی برای فونت ها وجود دارد از جمله؛

ویژگی Font-face

از این ویژگی یا صفت برای قرار دادن یک فونت اختصاصی استفاده میشود.به مثال زیر دقت کنید؛

@font-face{
font-family: “Vazir“;
src: url(“/fonts/Vazir-web.woff2“) format(“woff2“),
url(“/fonts/Vazir-web.woff“) format(“woff“);
}

ویژگی Font-Family

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

 

دوره ی آموزش html و css

 

تنظیم فونت در کل صفحه

تنظیم خصوصیات فونت برای کل یک صفحه وب کار سختی نیست، فقط باید از عنصر مناسب استفاده کنید: <body>. به عنوان مثال ، فرض کنید می خواهیم کل صفحه از فونت عمومی سیستم sans-serif استفاده کند. می توانیم این کار را با این اعلان CSS انجام دهیم:

body { font-family: sans-serif; }

در هنگام اعمال فونت ها و انتخاب رنگ قلم, دقت به سازگاری رنگ پس زمینه و رنگ انتخابی فونت بسیار مهم است.
به عنوان مثال ، کد زیر رنگ پس زمینه صفحه را به سیاه ، قلم را به سفید و خانواده قلم را به sans-serif تنظیم می کند. رنگ لینک های موجود در صفحه نیز به سفید و رنگ لینک های بازدید شده به سبز تغییر می کند.

body {
color: white;
background-color: black;
font-family: sans-serif;
}
a { color: white; }
a:visited { color: green; }

مبدل های فونت

آموزش رایگان html - جلسه 7| فونت ها در html
فونت ها در HTML / مبدل های فونت

همانطور که تا به این جا به آن اشاره کردیم فونت ها نقش بسیار مهمی در زیبایی وب سایت ها دارند. قطعا یک فونت مناسب میتواند جلوه ای خاص به وب سایت شما بدهد و استفاده از محتوای ارائه شده را برای کاربران لذت بخش کند.
به همین دلیل بسیاری از طراحان سعی می کنند از فونت های خاص استفاده کنند. اما برخی از این فونت ها برای بازدیدکنندگان نشان داده نمی شوند چون توسط قالب ها پشتیبانی نمیشوند, پس باید به طور مناسبی از آن ها استفاده کرد. برای حل این مشکل باید از مبدل های فونت استفاده شود.

اما این مبدل ها چه هستند و چه کاربردی دارند؟

با استفاده از مبدل ها می توانیم یک فونت را به فرمت های مختلف تبدیل کنیم و با استفاده از قابلیت وب فونت حتی در صورتی که فونت استفاده شده بر روی سیستم شخص بازدید کننده موجود نباشد نیز قابل مشاهده خواهد بود. وب فونت ها، فونت هایی هستند که از طریق دستور font-face@ در CSS می توانید آنها را ازمسیری که قرار دارند فراخوانی کرده و در صفحه استفاده نمایید.

برای حل مشکل پشتیبانی نکردن, لازم است تا فونت ها توسط یک مبدل رایگان آنلاین به فرمت های مختلف تبدیل شوند. فرمت هایی که قالب وب سایت شما از آن پشتیبانی می کند.

از جمله بهترین مبدل های فونت که به صورت رایگان در دسترس هستند و نیاز به ثبت نام و مراحل پیچیده ای برای استفاده ندارند, میتوان به موارد زیر اشاره کرد؛

www.onlinefontconverter.com

www.transfonter.org

 

😊✌ از بقیه‌ی جلسات  آموزش رایگان HTML جا نمونید✌😊

5/5 - (1 امتیاز)
برچسب ها: htmlآموزش رایگان htmlفونت ها در html
درباره پروین رستمی

عضو تیم تحریریه افق وب

جدیدتر با زبان های طراحی سایت بیشتر آشنا شویم؟
قبلی قالب رایگان چند منظوره وردپرس Accelerate

2 Comments

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • مرجان گفت:
    مرداد 23, 1400 در 2:15 ب.ظ

    سلام
    1 – چرا تو قسمت فونت چندتا نوشتید و , گذاشتید بینشون ؟
    2- برای هر قسمت باید اینجوری فونت مشخص کنیم؟

    ofoghweb.com : web design

    پاسخ
    • حامد نجفی گفت:
      شهریور 14, 1400 در 11:22 ق.ظ

      وقتی چند تا اسم فونت مینویسیم یعنی داریم به مرورگر میفهمونیم که اگر فونت اولی لود نشد برو سراغ بعدی و دومی اگر پیدا نشد همینطور بعدی. فونت هایی آخری که تعریف کردیم هم در همه مرورگر ها اجرا میشن

      پاسخ

دیدگاهتان را بنویسید لغو پاسخ

تازه های آموزش
  • تقویم محتوا چیست؟ (جلسه 33)
  • استراتژی تولید محتوا (جلسه 32)
  • عادت‌ نویسندگان مشهور و سرشناس (جلسه 31)
  • راهنمای کامل تغذیه محتوا نویس (جلسه 30)
  • چگونه یک محتوای تصویری خوب بسازیم؟ (جلسه 29)
  • 10 تکنیک برای افزایش فالوور اینستاگرام (جلسه 28)
  • راه اندازی کمپین در شبکه های اجتماعی (جلسه 27)
  • آموزش 0 تا 100 ایمیل نویسی (جلسه 26)
آموزش رایگان ووکامرس
آموزش رایگان المنتور
آموزش رایگان html -css
درباره افق وب

ما در افق وب آرزو داریم هرکسی بتواند وبسایت خودش را مطابق سلیقه دلخواه خودش طراحی کند و در این مسیر تمامی آموزش های لازم را از پایه و با بالاترین کیفیت ممکن به صورت کاملا کاربری ارائه میدهیم

دسترسی بیشتر
  • قوانین و شرایط
  • ارتباط با ما
  • استخدام
  • تدریس خصوصی وردپرس
ارتباط با ما
  • تهران، رباط کریم، مجتمع اداری پردیسان
  • 02156434684
  • info@ofoghweb.com
تمامی حقوق برای افق وب محفوظ می باشد.
اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://ofoghweb.com/?p=13476
ورود به سیستم ×

ورود با کد یکبارمصرف
واتساپ
ارسال مجدد کد یکبار مصرف(00:30)
آیا حساب کاربری ندارید؟
نام‌نویسی

ارسال مجدد کد یکبار مصرف (00:30)
برگشت به صفحه ورود به سایت
  • (+98) جمهوری اسلامی ایران
مرورگر شما از HTML5 پشتیبانی نمی کند.