logo
logo
تبلیغ کلیکی تاپ سایت 98

استفاده از فونت فارسی در سایت

استفاده از فونت فارسی در سایت
هدایت عباسی آموزش HTML

آموزش ویدیویی استفاده از فونت فارسی در سایت

در این فیلم و آموزش ویدئویی روش استفاده از فونت فارسی در سایت و html را خواهید آموخت.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش html از تاپ سایت 98 به سراغ بحث فونت ها و اضافه کردن فونت به صفحات وب و html می رویم. کد افزودن فونت فارسی در اختیار شما می گذاریم ، نحوه افزودن فونت فارسی ، کد css و غیره را به شما آموزش می دهیم.

استفاده از فونت فارسی در html

برای استفاده از فونت فارسی در html می بایست چند کار انجام دهیم.

من در قالب مثال عملی که آن را تست می کنم به شما آموزش می دهم و این کد صد در صد درست است.

ابتدا در مرحله یک ، یک پوشه بنام fonts ساخته ام و فونت های دلخواه فارسی که دارای پسوندهای ttf و woff و eot هستند را در آن قرار داده ام و من ابتدا فونت یکان (فونت بی یکان) را اضافه میکنم.

شما می توانید هر فونت فارسی را به همین شکل اضافه نمایید.

مرحله 2 یک فایل در پوشه css بنام styleTest.css ایجاد کرده ام و کد css که در قسمت پایین است به ان اضافه کرده ام.

مرحله 3 کد html را در قسمت زیر قرار داده ام. حتما باید فایل styleTest.css را به صفحه html لینک نمایید در غیر این صورت فونت اضافه نمی شود و تغییر نمی کند.

همان طور که در فایل css می بینید من برای body فونت byekan را قرار داده ام یعنی همه صفحه دارای فونت یکان خواهند شد.

کد اضافه کردن فونت فارسی به html

در بخش زیر کد اضافه کردن فونت فارسی به html را مشاهده می کنید.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>تاپ سایت 98</title>
<link rel="stylesheet" href="css/styleTest.css">
</head>
<body>
<h1>تاپ سایت 98</h1>
<p>TopSite98.com</p>
<p>آموزش رایگان کامپیوتر و برنامه نویسی</p>
</body>
</html>

کد اضافه کردن فونت فارسی به css

در قسمت زیر کد اضافه کردن فونت فارسی به css ، را مشاهده می کنید. در پوشه css یک فایل بنام styleTest.css ایجاد نمایید و کد زیر را در آن قرار دهید.

حتما باید فایل css به صفحه html از طریق link ، لینک شود که در کد بالا ، لینک شده است.

@font-face {
font-family: 'byekan';
src: url('../fonts/BYekan.eot');
src: url('../fonts/BYekan.woff') format('woff');
url('../fonts/BYekan.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body{
font-family: "byekan";
}

دانلود افزودن فونت فارسی به html

برای اینکه به مشکل نخورید کد بالا را بصورت کامل قرار داده ایم آن را دانلود نمایید.

کلیک نمایید : دانلود افزودن فونت فارسی به html

استفاده از فونت دلخواه در سایت

برای استفاده از فونت دلخواه در سایت ، بایستی ابتدا فونت را به پروژه اضافه کرد. در مثال بالا آموزش کامل آن را مشاهده کردید.

ابتدا یک پوشه بنام fonts در پروژه قرار دهید فونت ها بایستی دارای پسوندهای ttf و woff و eot باشند.

در فایل css بایستی کد فونت را قرار دهید که در بالا قرار داده ایم کافی است نام مناسب بجای byekan قرار دهید و نام فایل ها با پسوند eot و فایل های ttf و woff را تغییر دهید.

حال با اتصال فایل css به صفحات سایت و html ، فونت متن ها تغییر می کند.

اگر می خواهید فونت روی تمام متون اعمال شود برای تگ body ، از دستور font-family آن را مشخص نمایید.

اعمال نشدن فونت در css

در صورت اعمال نشدن فونت در css ، احتمالا مشکل از موارد زیر است :

حالت اول پوشه فونت را قرار نداده اید.

حالت دوم کد css آن را در فایل style.css قرار نداده اید.

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

حالت چهارم فایل style.css به فایل html لینک نشده است از طریق link در بخش head صفحه که در مثال بالا مشاهده می کنید.

نمایش فونت فارسی در html

برای نمایش فونت فارسی در html می توانید از روش های مختلف این کار را انجام دهید .

اگر بخواهید فونت روی همه متون و تگ های h1 و p و غیره اعمال شود در قسمت body از طریق font-family آن را مشخص نمایید.

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

مثلا می خواهید فونت فقط روی تگ های p اعمال شود از کد زیر استفاده می کنید.

p{
font-family: "byekan";
}

دسترسی به پوشه فونت

دسترسی به پوشه فونت از چه روشی امکان پذیر است؟

برای دسترسی به پوشه فونت از کد css بالا استفاده نمایید. ابتدا فایل های eot و ttf و woff را در پوشه fonts قرار دهید سپس کد css آن را قرار دهید مثال بالا را مشاهده نمایید.

بهترین فونت برای سایت چیست؟

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

اما فونت های زیبایی نیز هستند که باید آنها را خریداری نمایید که می توانید در گوگل جستجو نمایید.

معمولا پیش نمایش آنها را قرار داده اند بر اساس سلیقه می توانید خریداری نمایید.

فونت فارسی در bootstrap

برای افزودن فونت فارسی در bootstrap نیز همان روش بالا مناسب است.

در هر سایتی که می توانید از همین روش استفاده نمایید.

دانلود فونت یکان برای html

در قسمت زیر می توانید فونت یکان و دیگر فونت ها را برای html و bootstrap و غیره دانلود و مطابق مثال بالا استفاده نمایید.

دانلود فونت تحت وب فارسی

در بخش زیر می توانید فونت تحت وب فارسی را دانلود نمایید و مطابق مثال بالا استفاده نمایید.

دانلود فونت تحت وب فارسی

امیدواریم این آموزش برای شما کاربردی باشد مثال ها تست شده می باشد و کاملا صحیح می باشد. برای اطمینان بیشتر کد کامل را دانلود نمایید.

موفق باشید.

عزیزانی که تمایل دارند به تیم نویسندگی تاپ سایت 98 بپیوندند می توانند از طریق واتساپ با ما در ارتباط باشند. ما بهترین افراد را به تیم خود اضافه خواهیم کرد.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

دوره ارز دیجیتال تاپ سایت 98

منبع: تاپ سایت 98

تگ:

دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.