11

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

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

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

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

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

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

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

-webkit-font-smoothing: antialiased;

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

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

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

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

لا، الحل ليس فعالا، جربته مرات عديدة من قبل ولم ينفع فعلا، وإضافة الظل سيجعل النص أسوء (في نظري)

الحل الوحيد هو استخدام نسخة svg من الخط مع متصفح كروم، لكن الحل لا ينفع مع اللغة العربية لأنّ خط svg لا يدعم اللغات التي تلصق الحروف ( Bidirectional Language) مثل العربية،

لذا أحسن شيء هو الانتظار لحين يتم تصليح الأمر (الأمر تم إصلاحه في كروم نسخة المطورين وسيصل إلى المستخدم مع النسخة 35)

ملاحظة أخرى، المشكلة في كروم على ويندوز فحسب

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

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

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

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

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

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

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

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

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

text-shadow تعمل علي الكروم

اما بالنسبه للمشكله هي فعلا منذ زمن وانا لم اقل انها اكتشاف او اختراع جديد قمت بأختراعه كان فقط من باب مشاركه معلومه غير موجوده هنا فقط

اما بالنسبه للحل الذي قمت بطرحه ايضا هو حل لكنه برضه لا يفرق كثيرا عن سابقه عن تجربه للحلين !

بالمناسبه انت لست مضطر ان تنفذ اي حلول فقط كما قلت انتظر التحديث القادم وستحل المشكله !