در حال حاضر می‌توان فونت ها را با فرمت TTF به صفحه پیوست کرد که این فرمت توسط تمامی مرورگرهای جدید، قابل نمایش است. با استفاده از سرویس ‌های آنلاین نیز می‌توان همین فرمت TTF را به فرمت EOT تبدیل کرد تا مرورگرهای اینترنت اکسپلورر نیز بتوانند فونت های شما را به شکل درستی به نمایش بگذارند. علاوه بر این فرمت، کنسرسیوم جهان وب، فرمت WOFF را هم پیشنهاد کرد که حجم کمتری را ارائه می‌دهد و هم می‌توان حق نشر فونت را هم در آن حفظ کرد. خوشبختانه مرورگرهای فایرفاکس و اپرا و آی ای 9 از این فرمت پشتیبانی کره اند و به نظر می‌رسد که در آینده نزدیک این فرمت در تمامی مرورگرها پشتیبانی شود. با استفاده از این سه فرمت می‌توانید هر فونتی را بر روی وب استفاده کنید و مطمئن خواهید بود که فونتتان در مرورگرهای مختلف جدید و قدیمی به درستی نمایش داده می‌شود. تنها سیستم عامل iOS نسخه قدیمی است که تنها از فرمت فونت SVG پشتیبانی می‌کند ولی این مشکل iOS نیز در نسخه 4.2 حل شده است. اکنون مرورگر این سیستم عامل می‌تواند فونت‌های TTF را نیز بخواند. حال باید ببینیم که دستور @font-face را به چه شکل باید استفاده کرد. برای استفاده از این دستور تنها کافیست این عبارت را در بالای فایل CSSخود قرار دهید: @font-face { font-family: 'yekan’; src: url('fonts/yekan.ttf') format('truetype'); } در اینجا در خط اول، font-family را تعیین کرده ایم، هر نامی را که دوست داشته باشید، می‌توانید برای فونت انتخاب کنید. در خط دوم در دستور src باید مسیر فونت بر روی serverرا مشخص کنید و در آخر در دستور format، نوع فونت را مشخص می‌کنید. این دستور را در اول فایل CSSقرار می‌دهید و در ادامه در هر جایی که از فونتی با اسم yekan استفاده کنید، فونت مورد نظر شما از سرور دریافت شده و بر روی سیستم کاربر نمایش می‌یاید. اگر این بخش را در اول فایل CSS قرار ندهید و از فونت yekan در دستوری قبل از دستور font-face استفاده کنید، از آنجائیکه هنوز دستور font-face در دسترس مرورگر نبوده است، فونت مورد نظر شما نمایش داده نمی‌شود پس سعی کنید همیشه این بخش را در اول فایل CSS خود قرار دهید. حال با استفاده از سرویس های آنلاینی چون Kirsle (تنها این سایت توانست فونت‌های فارسی را به درستی تبدیل کند) فونت را به فرمت EOT تبدیل می کنیم و دستورمان را نیز ویرایش می‌کنیم: @font-face { font-family: 'yekan’; src:url('fonts/yekan.eot') format('eot'), url('fonts/yekan.ttf') format('truetype'); } حال باید اینترنت اکسپلورر نیز بتواند فایل فونت مربوط به خود را دریافت کند. فرمت EOT را در خط اول قرار می‌دهیم و فرمت TTF را در خط بعدی. مرورگرهای جدید خط اول را نادیده می‌گیرند و به سراغ خط دوم می‌روند. البته اینترنت اکسپلورر باز هم رفتاری عجیب نشان می‌دهد. اگر دستورات خود را به این شکل بنویسید، اینترنت اکسپلورر نخست فایل EOTرا دریافت می‌کند و به سراغ خط بعدی می‌رود و فایل TTF را هم دریافت می‌کند ولی ملاک را فایل دوم قرار می‌دهد و از آنجائیکه نمی‌تواند این فرمت را نمایش دهد، متن شما را با فونت پیش‌فرض نمایش می‌دهد و حتی از فرمت EOT که دریافت کرده بود نیز استفاده نمی‌کند. حال ما از یک هک استفاده می‌کنیم تا IE را به اشتباه بیاندازیم تا تنها خط اول را ببیند. کد خود را ویرایش می‌کنیم و دو علامت ?#را بعد از آدرس فرمت EOTاضافه می‌کنیم: @font-face { font-family: 'yekan’; src:url('fonts/yekan.eot?#’) format(‘eot’), url(‘fonts/yekan.ttf’) format(‘truetype’); } با این ترفند، مرورگر اینترنت اکسپلورر تنها خط اول را می بیند و تنها فایل EOT را دریافت می ‌کند در حالی که مرورگرهای دیگر خط اول را نادیده گرفته و خط دوم رو می‌خوانند و فونت TTF را دریافت می‌کنند. حال برای مرورگرهای جدیدتر از فرمت WOFF هم استفاده می‌کنیم تا کاربرانی که از این مرورگرها استفاده می‌کنند، فایل کم حجم تری را دریافت کنند. در این حالت، صفحه با سرعت بیشتری برای این کاربران باز می‌شود. البته هک‌های دیگری همچون هک smiley که توسط پاول آیریش ایجاد شده. البته همه جا پیشنهاد شده است که از هک اول که ما توضیحش دادیم، استفاده شود. @font-face { font-family: 'yekan’; src:url('fonts/yekan.eot?#’) format(‘eot’), url('fonts/yekan.woff') format('woff'), url(‘fonts/yekan.ttf’) format(‘truetype’); } حال تمامی مرورگرهای قدیمی و جدید می‌توانند فونت ها را دریافت کرده و سایت شما را با فونت مورد نظرتان نمایش دهند.

0
امتیاز

19 بهمن ماه 1393 ساعت: 07:56

شماره: 7714

جواب تو چیه؟

کاربر میهمان

حداکثر کاراکتر مجاز: 2000

ابزارهای ویرایشی:

به منظور نمایش شکیل تر کد های برنامه نویسی در متن پاسخ ها می توانید از این ابزار استفاده نمایید:
زبان کد:
متن کد: