11

حل مشكله تشوهه الخطوط المخصصه "font-face" علي متصفح جوجل كروم

حل مشكله تشوهه الخطوط المخصصه "font-face" علي متصفح جوجل كروم

يمكنك ان تري المشكله عبر الرابط التالي

تصفح الرابط بأستخدام الكروم

http://arab-themes.com/?p=1948

ستجد ان الخط مشوهه او " مبكسل "

حل المشكله بأضافه كود smoothing في css

-webkit-font-smoothing: antialiased;

ايضا يضاف سطر اخر خاص بعمل ظل بسيط للنص يعمل بشكل كبير علي اخفاء التشوهات

text-shadow: 0px 0px 1px ‪#‎BBB‬;

يمكنك تغير لون الظل بالون الذي تراه مناسباً لك بدلا من BBB


لا عزيزي هو حقا من وجهه نظرك انت

لان الظل انت تستطيع ان تختار اللون الافضل الذي يجعل النص في افضل صوره وكثيراً ما استخدم الحل بدون تأثير علي الشكل العام للتصميم وللخط

وبالتأكيد سيتم اصلاح الامر لكن هل نظل ننتظر كل هذا ام نبحث عن حلول تفي بالغرض ؟! لحين حل المشكله من جذورها

الأمر يعتمد على الخلفية وحجم الخط والمكان،

المشكلة موجودة من أكثر من سنتين للعلم، أخيرا سيتم حلها

وبالمناسبة text-shadow: 0px 0px 1px ‪#‎BBB‬; لم تعمل في كروم، أفضل حل في نظري هو التالي،

-webkit-text-stroke: 1px;
-webkit-text-stroke-color: rgba(0,0,0,0.5);

وهو بوضع إطار أسود حول النص (مثل الفوتوشوب) لكن بشفافية 50% فحسب، وهذه صورة به وبدونه أيضا صورة مباشرة من كروم كاناري (حيث لا توجد المشكلة)

كما تلاحظ لا فرق ملحوظ فعلا