اضافه کردن فونت فارسی در html و css
اضافه کردن فونت فارسی در html و css بر روی وب سایتهای فارسی زبان از اهمیت بالایی برخوردار است. به این دلیل که فونتهای پیش فرض زیبایی ندارند و شما به ناچار باید از فونتهای حرفه ای و مرسوم در وب سایتهای ایرانی استفاده کنید. ما در 4 قدم ساده به شما آموزش می دهیم که بتوانید به راحتی هر فونتی که دوست دارید را به وب سایت خود اضافه کنید.
اولین گام بارگذاری فونت دلخواه:
بارگذاری فونت دلخواه بر روی سرور یا لوکال هاست وب سایت شما. شما می توانید در مسیر روت پروژه یک فولدر به نام FONTS ایجاد کنید و فونتهای مد نظر خودتان را داخل این پوشه بارگذاری کنید.
شناخت انواع فرمتهای فونت رایج برای استفاده در وب سایت:
TTF (TrueType Font):
این فرمت فونت در سال 1980 توسط شرکت Apple توسعه یافت. بعدها، این فرمت توسط مایکروسافت برای Windows به کار رفت. در بسیاری از مرورگرها و سیستمهای عامل پشتیبانی میشود. برخی از مرورگرهایی که TTF را پشتیبانی میکنند شامل Google Chrome، Safari، Firefox و Internet Explorer 9+ میباشند.
WOFF (Web Open Font Format):
این فرمت فونت در سال 2009 توسعه یافت و توسط Mozilla، Opera و Microsoft پشتیبانی شد. WOFF در واقع یک فرمت فشرده برای فونتهای TrueType و OpenType است. این فرمت توسط بیشتر مرورگرهای امروزی مانند Google Chrome، Firefox، Internet Explorer 9+، Safari و Opera پشتیبانی میشود.
WOFF2 (Web Open Font Format 2):
این فرمت بهبود یافته و جدیدتر از WOFF است و از فشرده سازی بهتری برخوردار است. بنابراین، سرعت بارگذاری صفحات وب با استفاده از این فرمت فونت، سریعتر است. بیشتر مرورگرهای امروزی از جمله Google Chrome، Firefox، Internet Explorer 11+، Safari و Opera از این فرمت پشتیبانی میکنند.
EOT (Embedded OpenType):
این فرمت فونت توسط مایکروسافت برای استفاده در صفحات وب توسعه یافته است و بیشتر به خاطر سازگاری با Internet Explorer شناخته شده است. این فرمت فقط توسط Internet Explorer پشتیبانی میشود.
نکته حائز اهمیت این است که، به طور کلی، برای اطمینان از سازگاری فونتها با تمام مرورگرها، معمولا ترکیبی از این فرمتها استفاده میشود.
برای معرفی این فونتها به فایل style.css پروژه خود طبق ویدیو آموزشی می توانید از قطعه کد زیر در @font-face استفاده کنید.
@font-face { font-family: vazir; font-style: normal; font-weight: normal; src: url('fonts/vazir/eot/Vazir-FD.eot'); src: url('fonts/vazir/eot/Vazir-FD.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('fonts/vazir/woff2/Vazir-FD.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('fonts/vazir/woff/Vazir-FD.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('fonts/vazir/ttf/Vazir-FD.ttf') format('truetype'); }
اضافه کردن فونت فارسی در html و css
دومین گام استفاده از font-family:
استفاده از font-family در فایل css پروژه خود. در نمونه بالا ما نام font-family را vazir گذاشته ایم و شما هم برای استفاده از این فونت باید در فایل css اصلی پروژه خودتون طبق نمونه کد زیر از vazir استفاده کنید.*{ font-family: vazir; }با این قطعه کد تمام فونتهای وب سایت شما از فونت وزیر که در پوشه fonts بارگذاری کرده اید استفاده می کند.
سومین گام معرفی فایل style.css به HTML:
برای استفاده از فایل style.css در سند html خودتان کافیست از تگ link در قسمت head سند خود استفاده کنید. در زیر کد نمونه برای شما آورده شده. فقط دقت داشته باشید که علاوه برای فراخوانی فایل style.css می بایست زبان را به فارسی FA و جهت نوشته را به راست به چپ RTL افییر دهید.<!doctype html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>font</title> </head>تبریک میگوییم شما در سه قدم توانستید فونتهای دلخواه فارسی خود را به پروژه HTML اضافه کنید.
آشنایی با مای وب
ما در مای وب بر آن هستیم تا بتوانیم به روزترین مطالب درمورد وردپرس و آموزش طراحی وب سایت را برای کاربران خودمون در قالب فایلهای ویدیویی و متنی فراهم کنیم. انشالله بتوانیم بهترین خدمات را به شما عزیزان همراه ارائه دهیم.برای دانلود فایلهای این پروژه بر روی دکمه زیر کلیک کنید
دیدگاهتان را بنویسید