مدتی هست که در کارهام از وب‌فونت‌های فارسی استفاده زیادی می‌کنم. فونت‌هایی مثل یکان، زر و میترا (و چند فونت دیگر فارسی) گزینه‌های خوبی برای تایپوگرافی در وب هستن (البته کاربردهای متفاوتی دارن).

اما مشکلی که وجود داره در استفاده از این وب‌فونت‌ها اینه که فونت‌های فارسی به دلیل استاندارد نبودنشون و عدم وجود اطلاعات هینتینگ صحیح در فایل فونت، با مشکل نمایش در ویندوز مواجه می‌شن. البته این مشکل نمایش در مرورگر کروم بسیار شدیدتر از مرورگرهای دیگه هست و در اینترنت اکسپلورر ۹ به بالا بهتر از بقیه، به این دلیل که مایکروسافت در اینترنت اکسپلورر ۹ و ۱۰، از سیستم رندر فونت DirectWrite به همراه نسخه بهبود یافته ClearType بهره گرفته که باعث می‌شه فونت‌ها بسیار بهتر دیده بشن از مرورگرهای دیگه. ولی متاسفانه گوگل کروم هنوز از سیستم رندرینگ قبلی ویندوز استفاده می‌کنه و تا زمانی که اطلاعات هینتینگ مناسب در فایل فونت موجود نباشه، نمی‌تونه فونت رو به درستی نمایش بده.

وقتی که داشتم رو یکی از پروژه‌های جدیدم -نگارش- کار می‌کردم، و می‌خواستم از فونت زر برای متن و از یکان برای تیترها استفاده کنم، متوجه شدم که فونت زر بسیار بد در ویندوز نمایش داده می‌شه. البته من از نسخه اصلاح شده‌ی زر که توسط دوست خوبم حسین کیایی روش کار شده استفاده کردم، ولی بازهم نتیجه در کروم ویندوز بسیار بد بود. البته سایت Irmug یه سری از فونت‌های فارسی به اسم «قلم‌های سری ایکس نسخه ۲» رو که برای نمایش بهتر در سیستم‌های مک و یونیکس بهینه سازی شدن برای دانلود رایگان قرار داده، و با تستشون متوجه شدم که نمایششون در ویندوز خیلی بهتر از نسخه‌های معمولیه، ولی متاسانه حجم فایل‌هاشون خیلی زیاده (بالای یک مگابایت) و کم کردن حجمشون با FontSquirrel باعث شد که اطلاعات اساسی فونت از دست بره، برای همین از همون فونت‌های اصلاح شده توسط حسین عزیز استفاده کردم.

در زیر شما اسکرین شات از یک بخش از متن سایت نگارش رو در اینترنت اکسپلورر۹ در ویندوز، کروم در ویندوز و کروم در مک مشاهده می‌کنید:

این مشکل راه‌حل‌های متفاوتی داره ولی متاسفانه حساب کردن روی بیشتر اون‌ها امکان پذیر نیست:

• *اصلاح فونت‌های فارسی و بهینه‌سازی اون‌ها برای وب: *هزینه و زمان زیادی نیاز داره. مدتیه که دوستانی مثل حسین کیایی و صالح سوزنچی در حال تلاش برای بهینه‌سازی فونت‌های فارسی برای وب هستن، و نتایج خوبی هم از کارهاشون به دست اومده، اما تا زمانی که بشه به صورت کامل مشکلات رو حل شده دونست، فاصله زیادی داریم.
• *مرورگر کروم سیستم رندرینگ فونت جدید ویندوز۷ رو به کار ببنده: *خبرهای متفاوتی از تیم کروم به گوش می‌رسه که در حال بهینه سازی رندرینگ فونت در کروم هستن، اما اگر فرضا اونا این سیستم رو تو جدیدترین نسخه گوگل کروم هم به کار ببندن، تا فراگیر شدن این نسخه و استفاده تموم کاربرا ازش فاصله زیادی داریم.
• *استفاده از ترفندهای CSS برای بهبود نمایش فونت‌ها: *این راه در حال حاضر قابل پیاده سازیه، اما فقط تا حدودی نمایش فونت رو بهتر می‌کنه تا قابل خوندن باشه. در ادامه‌ی این مطلب این روش رو توضیح می‌دم.

بهبود نمایش با استفاده از CSS

وقتی در حال توسعه سایت نگارش بودم، از دوست خوبم آرمین ابراهیمی در مورد نمایش فونت‌ها در ویندوز نظر خواستم، اون هم بعد از چند ساعتی تست و کار کردن روی متدهای مختلف برای بهتر کردن نمایش فونت‌ها، به من پیشنهاد کرد که از خصوصیت -webkit-text-stroke-width در کروم ویندوز استفاده کنم. به این شکل:

-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.3px;

خط اول مرورگر کروم (و سافاری) رو مجبور می‌کنه که متن رو به صورت Anti-Aliased نمایش بدن (توضیحش رو قبلا دادم)، و خط دوم به مرورگر می‌گه که متون رو با یک حاشیه نازک ۳دهم پیکسلی نمایش بده، البته شما می‌تونید این عدد رو بسته به سلیقه‌تون و اینکه چه مقدار باشه که فونتتون خوب نمایش داده بشه، تغییر بدید.

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

برای حل این مشکل شما باید با یکی از روش‌های موجود، نسخه کروم در ویندوز رو تشخیص بدید، و بر اساس اون خط دوم کد بالا رو به فایل CSS تون اضافه کنید. یکی ازین راه‌ها استفاده از اسکریپت‌های تشخیص قابلیت‌های مرورگر مثل Modernizr و یا اسکریپت‌های تشخیص نسخه مرورگر هستن. برای مثال من از اسکریپت CSS Browser Selector استفاده کردم. این اسکریپت، نام و نسخه مرورگر، و سیستم‌عاملی که تحتش اجرا شده رو به صورت کلاس به تگ body اضافه می‌کنه و ما در سی‌اس‌اس می‌تونیم همچین کاری انجام بدیم:

body{
    -webkit-font-smoothing: antialiased;
}
.win.chrome body{
    -webkit-text-stroke-width: 0.3px;
}

نتیجه این روش تصویر زیره:

درسته که این روش هم از لحاظ روش انجام، و هم از لحاظ نتیجه‌ای که ازش حاص می‌شه (تصویر بالا) روش خوبی نیست و مشکلات بسیاری داره، ولی از نظر من تا زمانی که راه‌حلی قطعی برای بهینه‌سازی فونت‌های فارسی ارایه نشه، این یکی از کم دردسرترین روش‌های موجوده و شما می‌تونید توی پروژه‌ی بعدی ازش استفاده کنید، که شاید جهان هم از سلطه فونت نازیبای تاهوما خلاص شد :)

موفق باشید، سالار.