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

wpml در اسلایدر رولوشن
افزونه wpml در slider revolution
آذر 4, 1398
نصب قالب وردپرس در دایرکت ادمین
نصب قالب وردپرس در DirectAdmin
آذر 4, 1398

اگر می خواهید در سایتتان از فونت های دلخواه استفاده کنید ولی روش انجام این کار را نمی دانید، در این مقاله خواهید آموخت که چگونه می توان فونت یا فونت های دلخواه را از طریق 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
مریم حسینی
مریم حسینی
با همه وجود در تلاش برای رسیدن به موفقیت هستم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *