آموزش استفاده از فونت دلخواه در CSS

[AHMAD]

سلام

اگر شما هم علاقمند هستید تا از فونت دلخواه خود در طراحی سایت استفاده کنید اما نمی دانید این کار به چه صورت انجام می گردد ، این تاپیک می تواند برای شما مفید واقع شود.

در CSS3 قابلیتی وجود دارد که با استفاده از آن می توان فونت دلخواه خود را تعریف کرده و در طراحی سایت از آن استفاده کنید. برای این کار می بایست فایل مربوط به فونت مورد نظر را بر روی فضای هاست وب سایت خود آپلود کرده و با استفاده از دستور زیر آن را به صفحه خود پیوست کنید :

@font-face {
    font-family: 'yekan’;
    src:url('fonts/yekan.eot?#’) format(‘eot’),  
          url('fonts/yekan.woff') format('woff'),
          url(‘fonts/yekan.ttf’) format(‘truetype’);
}

کد بالا نشان می دهد قصد داریم فونتی به نام yekan را که فایل های آن در فولدر fonts قرار دارد را معرفی کنیم و در صفحه وب خود از آن استفاده کنیم.

در قسمت font-family می توان به جای yekan هر نام دیگری برای فونت وارد شده تعیین کرد اما دقت کنید در تمامی صفحات برای نمایش این فونت می بایست از همین نام استفاده کنید.

 

[AHMAD]

سوال : به چه دلیل از 3 فرمت مختلف (یا بیشتر) برای معرفی فونت در CSS استفاده می شود ؟


پاسخ : هرکدام از این فرمت ها برای مرورگرهای مختلف مورد استفاده قرار می گیرد. به عنوان مثال مرورگر اینترنت اکسپلورر فقط می تواند فرمت eot را بخواند (البته از نسخه 9 به بعد فرمت woff را نیز پشتیبانی می کند)

فرمت ttf بجز اینترنت اکسپلورر بر روی سایر مرورگرها پشتیبانی می شود.

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