• صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Menu
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Search
Close this search box.
۰ تومان 0 Cart
  • ورود
  • ثبت نام
Menu
  • ورود
  • ثبت نام
Search
Close this search box.
۰ تومان 0 Cart
Menu
  • ورود
  • ثبت نام
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Menu
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما

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

تیر 20, 1400
نویسنده حامد نجفی
HTML-CSS ، برنامه نویسی
342 بازدید
آموزش رایگان html - جلسه 7| فونت ها در html

در جلسات قبل در مورد جدول ها, فرم ها و… در 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
About حامد نجفی

بعد از گذشت 9 سال کار با وردپرس و فعالیت اینترنتی هر روز علاقه ام به این کار بیشتر میشه. سختی های زیادی تو این راه کشیدم و دوست دارم به شما کمک کنم این مسیر رو سریعتر طی کنین. با من در شبکه های اجتماعی در تماس باشید :)

More Posts by حامد نجفی
تبلیغات
هاست وردپرس

مطالب زیر را حتما مطالعه کنید

آموزش رایگان CSS- جلسه 16| جدول ها در CSS

آموزش رایگان CSS- جلسه 16

آموزش رایگان CSS- جلسه 15| لیست ها در CSS

آموزش رایگان CSS- جلسه 15

اموزش رایگان CSS- جلسه 14| تصاویر در CSS

آموزش رایگان CSS- جلسه 14

آموزش رایگان CSS - جلسه 13| لینک ها در CSS

آموزش رایگان CSS – جلسه 13

آموزش رایگان CSS- جلسه 12| فونت ها در css

آموزش رایگان CSS- جلسه 12

آموزش رایگان CSS - جلسه 11| متن ها در CSS

آموزش رایگان CSS – جلسه 11

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

2 Comments

Join the discussion and tell us your opinion.

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

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

    ofoghweb.com : web design

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

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

      پاسخ

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

Search for:
نوشته‌های تازه
  • تقویم محتوا چیست؟ (جلسه 33)
  • استراتژی تولید محتوا (جلسه 32)
  • عادت‌ نویسندگان مشهور و سرشناس (جلسه 31)
  • راهنمای کامل تغذیه محتوا نویس (جلسه 30)
  • چگونه یک محتوای تصویری خوب بسازیم؟ (جلسه 29)
آخرین دیدگاه‌ها
  • نوبتی در قالب رایگان چند منظوره وردپرس Accelerate
  • امیر در دانلود قالب آموزشی رایگان وردپرس – Education Zone
  • 989177822446 در قالب خدماتی Krystal Lawyer ویژه وکالت
  • وردپرس در قالب رایگان چند منظوره وردپرس Accelerate
  • مژگان فردمنش در هاور ستون ها در المنتور (جلسه 37)

یاد باد آنکه ز رخسار تو هر صبحدمی

افق دیده پر از شعله خور بود مرا

دسته بندی بلاگ

  • بازاریابی
  • سئو
  • محتوا نویسی
  • مقالات آموزشی
  • وردپرس
  • بازاریابی
  • سئو
  • محتوا نویسی
  • مقالات آموزشی
  • وردپرس

خدمات مشتریان

  • تدریس خصوصی وردپرس
  • روش دریافت محصولات دانلودی
  • مشاوره دوره ها
  • تدریس خصوصی وردپرس
  • روش دریافت محصولات دانلودی
  • مشاوره دوره ها

دسترسی سریع

  • تماس با ما
  • درباره ما
  • قوانین و شرایط
  • استخدام
  • تماس با ما
  • درباره ما
  • قوانین و شرایط
  • استخدام

تمامی حقوق مادی و معنوی این سایت متعلق به آکادمی افق وب میباشد.

ورود
استفاده از موبایل
استفاده از آدرس ایمیل
آیا هنوز عضو نیستید؟ اکنون عضو شوید

بازنشانی رمز عبور
استفاده از موبایل
استفاده از آدرس ایمیل
عضویت
قبلا عضو شدید؟ اکنون وارد شوید

4 − سه =