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

این مشکل در فایرفاکس۶ برای فونت‌هایی که توسط طراح با کمک قابلیت font-face سی‌اس‌اس تعریف می‌شن پیش می‌آد که معمولاً هم از این نوع فونت‌ها در تیترها استفاده می‌شه.

برای رفع این مشکل (نمایش جدا جدای حروف) در این فایرفاکس۶ دو راه حل ساده هستش؛

۱. کد font-face رو حذف کنیم.

به این شکل که کد زیر و یا کدهای مشابه کد زیر رو که از قبل برای تعریف فونت‌های مختلف در مرورگر در فایل استایل استفاده می‌کردیم رو حذف کنیم تا مشکل برطرف بشه.

@font-face {
 font-family: 'b koodak';
 src: url('fonts/BKoodkBd.eot');
 src: local('b koodak'), url('fonts/BKoodkBd.ttf') format('truetype');
}

از این کد برای تعریف فونت‌ها استفاده می‌کنیم تا متن مورد نظر ما در همه مرورگرها و سیستم‌هایی که فونت مورد نظر رو در سیستمشون ندارن به یک شکل دیده بشه، همون طوری که گفتم اگه کد بالا و یا کدهای مشابه اون رو حذف کنید مشکل نمایش جدا جدای حروف برطرف می‌شه.

مشکل این روش اینه که اگه در سیستم بازدیدکننده فونت مورد نظر شما وجود نداشته باشه متن‌ها به شکل دیگه‌ای نمایش داده می‌شن، یعنی شما مجبورید فقط و فقط به خاطر نسخه‌ی ۶ مرورگر فایرفاکس نحوه‌ی نمایش صفحه‌ی وبتون رو در همه مرورگرها تغییر بدید!

۲. با کمک دستورات اختصاصی فایرفاکس؛ از فونت دیگه‌ای برای فایرفاکس استفاده کنیم.

این روش دیگه مشکل روش قبلی رو نداره، و شما مجبور نیستید به خاطر فایرفاکس نحوه‌ی نمایش متن رو تو همه مرورگرها تغییر بدید، می‌آیم فقط نمایش تو مرورگر فایرفاکس رو تغییر می‌دیم!
این روش خوبیه برای مرورگر فایرفاکس که در حال حاظر این مشکل رو با زبون فارسی داره؛ به صورت موقتی از کد دیگه‌ای استفاده کنیم تا مشکلی در نمایش نوشته‌ها وجود نداشته باشه و فقط نوع فونتش با مرورگرهای دیگه فرق داشته باشه.

راه حل این روش هم اینه که از دستورات اختصاصی مرورگر فایرفاکس استفاده کنیم تا فونت متن مورد نظر در مرورگرهای مختلف دیگه بهم نریزه.
اگه شما به زبان CSS کدنویسی کرده باشید احتمالا با دستورات اختصاصی اینترنت اکسپلورر آشنایی دارید که برای همسان سازی طراحی در نسخه‌های مختلف اینترنت اکسپلورر ازشون استفاده می‌شه.

خب الان ما با مرورگر فایرفاکس مشکل داریم، پس مجبوریم از دستورات اختصاصی این مرورگر برای رفع مشکل استفاده کنیم، کدهای CSS اختصاصی فایرفاکس که ما بهشون نیاز داریم به صورت زیر هستند:

@-moz-document url-prefix() {
	{CSS Code}
}

طبق کد بالا، اگر دستورات CSSای رو در خط دوم کد جای عبارت {CSS Code} قرار بدیم این دستورات فقط در مرورگر فایرفاکس اجرا می‌شن، ما به کمک این دستور فونت استفاده شده در فایرفاکس رو تغییر می‌دیم که مشکلی در نحوه‌ی نمایش بوجود نیاد. به یه نمونه کد زیر دقت کنید:

@-moz-document url-prefix() {
.title {
 font-family: Arial, Tahoma !important;
}
}

فقط کافیه از نمونه کد من (کد بالا) الگو بگیرید و و به جای title کلاس متنی رو بنویسید که در فایرفاکس۶ به صورت جدا جدا نمایش داده می‌شه. حالا می‌تونید این کد رو در فایل استایل و یا فایل سربرگ وبلاگ قرار بدید تا فایرفاکس دیگه نوشته‌های شما رو به صورت جدا جدا نمایش نده.

شاید اون روز رسیده که باید بیشتر دستورات اختصاصی مرورگرهای مختلف رو بشناسیم و طراح‌ها برای طراحی یک سایت ِ یک‌دست‌تر دردسرهای بیشتری رو تحمل کنن.

به‌روز رسانی: پست کاملی برای رفع این مشکل در فایرفاکس و روش‌های استفاده از فونت‌های سفارشی (font-face) در اینجا نوشته شده که پیشنهاد می‌کنم حتماً بخونیدش.

سطح مطلب: