استفاده از فونت فارسی برای صفحات وب با استفاده از CSS

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

استفاده از فونت فارسی برای صفحات وب با استفاده از CSSبه فونت های بخش آموزش یا فروشگاه دقت کرده اید ؟ همانطور که مشاهده می کنید چند نوع فونت در سایت مورد استفاده قرار گرفته است .  در css3 این امکان وجود دارد که هر فونتی را که بخواهیم برای صفحات وب لحاظ می کنیم یعنی می توانیم مشخص کنیم که منوی سمت راست با این نوع فونت نمایش داده شود و قسمت های دیگر با فونت مورد نظر ما. روش کار هم زیاد کار مشکلی نمی باشد فقط باید از چند خط تگ ساده که برای انجام اینکار در استاندارد Css قرار داده شده است استفاده کنیم .
ابتدا فونتی که دوست دارید برای یک قسمت از سایت مورد استفاده قرار بدهید را با پسوندهای .otf و .ttf از اینترنت دانلود کنید . مثلا فونت B yekan  که آقای صبح خیز در بعضی از قسمت استفاده کرده است .  زمانی که فونت مورد نظر را دانلود کردید چند فایل با پسوند های مختلف دارید که هر کدام از این پسوند ها توسط یک مرورگر پشتیبانی می شود.


فایل  با پسوند .otf و .ttf  را مرور گر های Safari , Firefox , Opera  و Chrom  پشتیبانی می کنند.
فایل با پسوند .otf را مرورگرهای IE+ پشتیبانی می کنند.

فرض را بر این می گیرم که فونتتان را دانلود کرده و در یک پوشه ذخیره کرده اید . حالا باید فونت را در پوشه قالب هاست آپلود کنید . می توانید پوشه فونت را در بخش های دیگر نیز آپلود کنید ولی بهتر است در جای مشخصی باشد که راحت تر بتوانید تغییرات اعمال کنید . 


به عنوان مثال اگر بخواهیم فونت سایت را یک فونت خاص بگذاریم باید دستور زیر را ابتدای فایل css قرار دهیم. تگ @font-face برای مشخص کردن یک فونت خاص و نسبت دادن آن به قسمتی که قصد دارید نوع فونت آن تغییر کند می باشد . 
Font-family:'B yekan' عنوان فونت
Src: Url هم آدرس محل ذخیره فونت می باشد .



@font-face {
  font-family: B yekan';
  src: url('fonts/byekan.eot?#') format('eot'),  /* IE6–8 */
       url('fonts/byekan.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('fonts/byekan.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

 خوب تا به اینجای کار که مشکلی وجود ندارد . حالا شما می توانید تگ @font-face را فراخوانی کنید .  یعنی کافیست در هر قسمتی که دوست دارید فونت b yekan را مورد استفاده قرار بدهید . به عنوان مثال



ul.menu {
    font-family: "BYekan";
    font-size: 13px;

 

آخرین بروز رسانییکشنبه, 10 خرداد 1394 14:04

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا