در اغلب سایتهای فارسی از فونتهای Tahoma و Arial برای نوشتن محتوای صفحات و تگهای h1 تا h6 استفاده می شود. این در حالی ایست که در سالهای اخیر فونت های زیبای بسیار زیادی برای زبان فارسی طراحی شده است و برخی از صاحبان سایتها علاقه دارند تا از فونت های فارسی در طراحی سایت خود استفاده کنند.
اما استفاده از این فونتها مشکلاتی در بر دارد، زیرا اگر شما این فونت را در استایل متن استفاده کنید و در کامپیوتر بازدید کننده این فونت وجود نداشته باشد، به صورت پیش فرض با فونت Arial نمایش داده می شود که در برخی موارد ظاهر سایت را بهم می ریزد.
در ادامه این مقاله نحوه استفاده از فونت های فارسی در طراحی سایت با استفاده از CSS3 به شما آموزش داده می شود.
نحوه بکاربردن فونت فارسی با CSS3
با استفاده از CSS3 مشکل استفاده از فونت های فارسی در طراحی سایت برطرف شده است و طراحان وب سایتها با چند خط کد می توانند فونت مورد نظر خود را در سایت قرار دهند فقط کافیست مراحل زیرا طی نمایند.
1» فونت مورد نظر را در ۴ فرمت ttf ، eot ، svg ، woof برای مرورگرهای مختلف تهیه نماید. برای تبدیل فونت به فرمتهای دیگر می توانید از سرویسهای آنلاین همانند www.onlinefontconverter.com نمایید.
2» زمانیکه که فرمتهای فونت را آماده کردید فایل CSS اصلی سایت را باز کنید و کد زیر را قرار دهید:
@font-face {
font-family: ‘b koodak’;
src: url(‘Fonts/BKoodak.eot’);
src: url(‘Fonts/BKoodak.eot?#iefix’)
format(‘embedded-opentype’),
url(‘Fonts/BKoodak.woff’) format(‘woff’),
url(‘Fonts/BKoodak.ttf’) format(‘truetype’),
url(‘Fonts/BKoodak.svg#BKoodakRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
با استفاده از کد بالا می توانید از فونت های فارسی در طراحی سایت استفاده نمایید. البته به این نکته توجه کنید که فرمت فونت
هایی که استفاده می نمایید truetype باشد و ویرایش شده نباشد زیرا ممکن است در سیستم عامل های مختلف فونت ها به شکل
دیگری نمایش داده شود.
فقط توجه داشته باشید استفاده بیش از حد از فونت ها فارسی در طراحی سایت، سرعت بارگذاری را افزایش می دهد و از طرفی
روش در حال حاضر بکاربردن فونت فارسی با CSS3 در گوگل کروم ساپورت نمی شود.
|
|
|
