استفاده از فونت ها در طراحی سایت
اگر می خواهید در سایتتان از فونت های دلخواه استفاده کنید ولی روش انجام این کار را نمی دانید، در این مقاله خواهید آموخت که چگونه می توان فونت یا فونت های دلخواه را از طریق CSS به سایت اضافه کرد و آنها را در محل های دلخواه به کار گرفت. با استفاده از این روش می توانید فونت های متعددی را بر اساس نیاز در سایتتان به کار بگیرید. البته ما استفاده از بیش از ۲ فونت را به شما توصیه نمیکنیم به این جهت که بارگذاری هر یک از این فونت ها بسته به سرعت اینترنت کاربرانتان، زمانگیر بوده و میتوانید منجر به دریافت نتایج نامطلوب شود.
برای استفاده از فونت ها در طراحی سایت باید مراحل زیر انجام دهید:
۱) فایل های فونت مورد نظر را کپی کنید و در پوشه fonts سایت Paste کنید.
۲) کد زیر را در فایل style.css باید Paste کنید.
} font-face@
/* تعریف یک نام برای فونت */ ;” font-family: “IRANSans-web
;font-style: normal
;font-weight: normal
(“src: url(‘../fonts/IRANSans-web.eot’) format(“embedded-opentype
(“url(‘../fonts/IRANSans-web.woff’) format(“woff,
{;(“url(‘../fonts/IRANSans-web.ttf’) format(“truetype,
فرمت فونت هایی که در بالا استفاده کردیم هر یک در مرورگرهای مختلفی قابل پشتبانی هستند.
– svg: این فرمت توسط سیبستم عامل های ios پشتیبانی می شود و برای فونت های فارسی استفاده نمی شود.
– eot: فقط در مرورگرهای اینترنت اکسپلورر (IE) قابل پشتیبانی هستند.
– woff: این فرمت در مرورگرهای مدرن و اینترنت اکسپلورر ورژن ۹ به بعد پشتیبانی می شود.
– ttf: بیشتر مرورگرها از این فرمت پشتیبانی می کنند بغیر از اینترنت اکسپلورر.
نکته: آدرس دهی فونت کاملا باید دقیق نوشته شود در غیر اینصورت تغییری در نحوه نمایش متون در سایت ایجاد نخواهد شد.
../ در css یعنی از فایل جاری که(style.css) خارج شوید و وارد پوشه fonts (فایل های فونت مورد استفاده در سایت) شوید.
۳) حال باید در هر قسمتی که از font-family می خواهیم استفاده کنیم آن را برابر با IRANSans-web قرار دهیم. بعنوان مثال:
}h1
{;” font-family: “IRANSans-web