1181

جزئیات وبلاگ

shape
shape
shape
shape
shape
shape
shape
1394/08/20 - مقالات

تبدیل فونت ویندوزی به وب

فونت‌های استانداردی که بر روی همه سیستم‌عامل ویندوز و مکینتاش وجود داشته باشند، بسیار اندک هستند. لیستی از آنها در CSS font stack قرار داده شده است.
در براوزرهای مدرن که اکثر کاربران از آن استفاده می‌کنند، به سادگی می‌توان فونت دلخواه را با تکنیک‌های جدید، به صفحه وب افزود. گوگل صدها فونت را برای طراحان در Google Web Fonts آماده کرده است و اخیرا هم چندین فونت فارسی/عربی نیز قرار داده است.

یکی از سختی‌های این کار، تهیه نسخه‌ها و فرمت‌های مختلف یک فونت است. یعنی علاوه بر ttf لازم است که همان فونت خاص با پسوندهای svg, eot, ... نیز تهیه شود. در این لینک این کار بر روی 40 فونت فارسی انجام شده و همچنین روش افزودن آن به css صفحه نیز آموزش داده شده است.

یکی دیگر از مشکلات استفاده از فونت‌های تحت وب این است که در برخی براوزرها (مثل فایرفاکس) قبل از لود فونت، تا چند ثانیه متن ناپدید می‌شود که این چشمک (blink) برای کاربر مطلوب نیست. جناب Paul Irish در انتهای این مطلب برای رفع این نقیصه، استفاده از لود کننده فونت گوگل را توصیه کرده و نمونه کد مربوطه را نیز آورده است.

یکی دیگر از مسائلی که وجود دارد، کش نشدن فونت در سیستم کاربر است که دو راه برای آن پیشنهاد می‌شود. راه اول استفاده از localStorage که در این مقاله به سادگی و در این مقاله به تفصیل توضیح داده شده است. راه دوم تبدیل فونت به base64 برای استفاده inline و ذخیره آن در css است که این راه علاوه بر حل مشکل کش‌شدن فونت، مشکل چشمک (blink) که در پاراگراف قبل گفتیم را نیز حل می‌کند.

مشکل دیگر، مربوط به درخواست اضافی و زاید براوزر IE و ... است که این مشکل را نیز جناب پاول ایریش اینگونه حل کرده است:

@font-face { font-family: 'myFont'; src: url('myFont.eot?') format('eot'), url('myFont.woff') format('woff'), url('myFont.ttf') format('truetype'); }

 تبدیل فونت 

http://onlinefontconverter.com/

تبدیل فونت ویندوزی به وب