سادهترین روش افزودن فونت به پروژه HTML
مقالات طراحی سایتفونتهای فارسی یا انگلیسی برای پروژههای طراحی سایت را تنها با 2 خط کد به پروژه اضافه کنید ! سادهترین و اصولیترین روش جهت معرفی فونت برای پروژههای طراحی سایت !
فونت همواره یکی از اصلیترین عناصر در طراحی است . علاوه بر پروژههای طراحی سایت ، در کارهایی همچون طراحی بنر ، طراحی لوگو و … نیز فونت اهمیت بسیار زیادی دارد . درمورد پروژههای طراحی سایت ، فونت یکی از اصلیترین ملزومات است . اگر یک پروژه HTML را شروع به طراحی نموده و سپس توسط CSS بروی دیزاین آن نیز کار کنید ، اگر طراحی بسیار جذابی نیز بروی پروژه اجرا کنید ، بدون داشتن یک فونت زیبا ، پروژه شما جذاب نخواهد بود .
در پروژههای طراحی سایت ، چندین روش مختلف برای قرار دادن فونت روی پروژه قرار دارد . تفاوتی ندارد که پروژه شما به زبان فارسی است یا سایر زبانها ! شما کافیست تا فونتی با وزن مناسب را برای پروژه خودتان یافته و بروی قالب خود قرار دهید . معمولا فونتها دارای چند فرمت شناخته شده هستند که به شرح زیر است :
woff ( The Web Open Font Format )
woff2
ttf ( True Type Font )
eot ( Embedded OpenType )
svg
شما میتوانید در پروژههای طراحی سایت از فرمت ttf و همچنین فرمت woff و woff2 استفاده کنید . فرمت ttf اصولا برای فونتهایی است که داخل سیستم عامل شما قرار میگیرند . اگر به قسمت fonts در ویندوز خودتان مراجعه کنید و یکی از فونت هارا بررسی کنید ، خواهید دید که فرمت این فونتها همگی ttf هستند .
اما برای پروژههای طراحی وب بهترین فرمت ، woff و woff2 است چراکه این فرمت اساسا برای پروژههای تحت وب است . اما اکنون چگونه از یک فونت با فرمت woff یا woff2 بروی پروژه خودمان استفاده کنیم ؟
چگونه فونت woff یا woff2 را به پروژه معرفی کنیم ؟
قبل از هرچیزی لازم است تا فونت خودتان را پیدا کنید . برخی فونتها مثل فونت ساحل و یکان که فونتهایی با وزن مناسب نیز هستند ، در سطح وب بصورت رایگان جهت دانلود قرار داده شدهاند و میتوانید بسادگی فایل آنها را دانلود کنید . پس از دانلود یک فونت شما ممکن است چندین وزن مختلف از آن را داشته باشید ، بصورت زیر :
Light
Regular
Medium
Bold
ExtraBold
مسلما وزن Medium و همچنین Regular برای استفاده در داخل متن سایت بسیار مناسب خواهند بود . وزنهای Bold و ExtraBold عموما برای قسمتهای تیتر و عناوین خاص استفاده میشوند .
برخی از فونتهای دیگر همچون ایران سنس ، ایران سنس دست نویس ، یکان اصلاح شده و … بصورت لایسنس قانونی بفروش میرسند و لازم است تا آنها را خریداری کنید . پس از تهیه این فونتها نیز شما به تمامی وزنها و فرمتهای فونت دسترسی خواهید داشت .
اکنون باید فایل فونت خود را داخل پروژه قرار دهید . معمولا از جهت استانداردسازی پروژه ، تمامی فونتها را داخل یک دایرکتوری ( پوشه ) بنام fonts قرار میدهند .
جهت معرفی فونت در گام دوم ، باید یک فایل CSS داشته باشید . فایل اصلی استایل پروژه شما نیز درصورتی که یک پروژه استاندارد داشته باشید ، بصورت Style.css نام گذاری خواهد شد . اکنون قبل از هرچیزی باید فایل Style.css خود را داخل تمامی فایلهای HTML خودتان آدرس دهی کنید که عموما بصورت زیر است :
<link rel="stylesheet" href="style.css" >
اکنون که تمامی فایلهای HTML شما به فایل اصلی استایل پروژه یعنی Style.css دسترسی دارند ، زمان آن فرا میرسد تا فونت را داخل فایل Style.css معرفی کنیم . جهت معرفی کردن فایل فونتی که داخل فولدر fonts قرار دادیم باید دستور زیر را داخل Style.css قرار دهیم :
@font-face {
src: url('fonts/dana-fanum-medium.woff') format('woff');
font-family:'seo90';
}
body,html{
font-family:'seo90';
font-size:15px;
}
اکنون شما فونت دانا با وزن medium را از داخل پوشه fonts آدرس دهی کرده و یک نام برای آن بصورت :
seo90
قرار دادید . نهایتا برای body,html همین خانواده فونت را با یک اندازه 15 پیکسلی معرفی کردیم تا تمام پروژه از این فونت استفاده کند . به همین سادگی شما فونت دلخواه را به پروژه خودتان معرفی خواهید کرد .
افزودن فونت به پروژههای تحت وب به همین اندازه ساده است . روشهای دیگری نیز همچون CDN وجود دارد که شما فونت را از یک آدرس در اینترنت فراخوانی کنید . اما مسلما این روشها به این دلیل که احتمال قطعی سایت منبع وجود دارد ، برای ما بهینه نیستند لذا بهتر است تا به همین روش عمل نموده و فایل فونت را داخل دایرکتوری پروژه قرار دهیم .
امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت
نقشه راه فرانت
اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید
استفاده از سلکتور visited برای استایل نویسی بهتر لینکها در طراحی پروژه های وب ! درست ترین حالت برای تغییر استایل لینک ها در حالت visited .
برای دوستان علاقمند به css در این قسمت یک سلکتور یا انتخاب کننده جذاب به نام selection را معرفی کردهایم که یادگیری آن خالی از لطف نیست . در این مقاله مختصر و مفید همراه ما باشید .