it-swarm.dev

Chrome لا نص محايد

Google Chrome لا يحرف نصي على الرغم من أنني أضفت رمزًا محددًا لـ Google Chrome للقيام بذلك.

في ملاحظة غريبة ، فإن Firefox ، الذي قيل أنه غير متوافق مع الكود الذي أضفته ، antialias النص بشكل مناسب.

إليك تصميم CSS المحدد:

.jumbotron h1 {
    color: white;
    font-size: 100px;
    text-align: center;
    line-height: 1;
    /*
     * Webkit only supported by Chrome and Safari.
     */
    -webkit-font-smoothing: antialiased;
}

كروم:

https://dl.dropboxusercontent.com/u/26438996/guru/guru-chrome.png

فايرفوكس:

https://dl.dropboxusercontent.com/u/26438996/guru/guru-firefox.png

كما ترون أعلاه (و ربما على الموقع الإلكتروني) يبدو الخط أفضل بكثير على Firefox.

34
Jire

ملاحظة: Chrome 37 والإصدارات الأحدث من الخط الثابت ، لذلك لم يعد هذا الإصلاح ضروريًا في الإصدار الأخير من Chrome.


أعتقد أن أفضل حل هو تحويل الخط الخاص بك إلى svg كـ chrome لا يعرض الخطوط مع الحواف إذا كان تنسيق ملف الخط هو svg.

يمكنك الحصول على مزيد من المعلومات هنا في المقالة حيث وجدت الإجابة بنفسي: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

بشكل أساسي ، يجب عليك تحويل الخط إلى تنسيق svg (باستخدام محول خط مثل font squirrel يوفر) وتعيين استعلامات الوسائط في css بحيث يتم تحديد تنسيق ملف svg أولاً في إعلان الخط الخاص بك لـ chrome ، ولكن ليس للمتصفحات الأخرى.

/* This is the default font face used for all browsers. */
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

/* This font face inherits and overrides the previous font face, but only for chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
}

وفويلا. يعمل الخط في Chrome مع الحواف.

38
sboisse

لقد كتبت إجابة كبيرة حول هذه المشكلة هنا: هل هناك أي "تجانس للخط" في Google Chrome؟ . يحتوي المنشور على كل ما تحتاج إلى معرفته وكيفية إصلاح ذلك. وهذا خطأ رسمي في Google Chrome ، مطورو المتصفح يعرفون عنه بالفعل ويعملون على إصلاح.

باختصار ، يمكنك إضافة هذا إلى قاعدة النص لجعل الخطوط تبدو أفضل بكثير:

النص السكتة الدماغية الإصلاح:

-webkit-text-stroke: 1px

أو

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

نص الظل (هاتريك):

 text-shadow: #fff 0px 1px 1px;

أو

 text-shadow: #333 0px 0px 1px; // for black text

خدعة تجانس الخطوط (بالاشتراك مع ما سبق):

-webkit-font-smoothing: antialiased;

ملاحظة: هذه طرق بديلة وليست حلاً حقيقيًا للمشكلة الأساسية

34
Sliq

هذه مشكلة في Windows 7/8 ، وليس مع Chrome. Chrome اعتاد أن يصبح دائمًا سيئًا. لكنهم قاموا بإصلاح ذلك باستخدام الإصدار 37. ومع ذلك ، لا يزال يقبل تفضيلات عرض خطوط Windows. لذا ، إذا كنت مثلي وأوقف تشغيل جميع إعدادات المظهر الفاخرة في الإطارات بعد ذلك ستحتاج إلى إنشاء قرص واحد للحصول على chrome لعرضه مرة أخرى بشكل صحيح.

لإصلاح هذه المشكلة ، يجب عليك إعداد مسح خطوط الكتابة في الإطارات وتمكين تجانس الخطوط في خيارات الأداء.

    • اذهب إلى القائمة ابدأ.

    • البحث عن "ضبط نص ClearType".

    • قم بتمكين ClearType وانتقل إلى المعالج لاختيار إعداداتك. (من السهل جدًا) يؤدي هذا إلى إعداد عارض النصوص للخطوة التالية. (إذا لم تقم بإعداد ClearType ، فستظل الخطوة التالية صالحة ولكن يبدو ClearType أفضل.)

    • اذهب إلى القائمة ابدأ

    • البحث عن "ضبط مظهر وأداء النوافذ"

    • هذا يفتح شاشة "خيارات الأداء".

    • انتقل إلى علامة التبويب الأولى "تأثيرات مرئية"

    • إذا حددت "Let windows select" أو "best مظهر" ، فلا بأس بذلك. ومع ذلك ، إذا اخترت أفضل أداء ، فسيتم تعطيل نظام مكافحة التعرجات على نطاق واسع. تتجاهل معظم المستعرضات (بما في ذلك Internet Explorer) هذا الإعداد. Chrome لا.

    • لإعادة تشغيله ، ولكن اترك جميع خيارات الأداء الأخرى حدد "مخصص".

    • بالقرب من أسفل القائمة ، اضغط على مربع الاختيار بجوار "حواف ناعمة لخطوط الشاشة"

    • ضرب تطبيق

أغلق الآن وأعد فتح الكروم. سيكون لديك نص أفضل بكثير.

16
guymella

وفقًا لهذا المدونة: http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

سيتم إصلاحه في Chrome 37. وهو محق في ذلك. لقد جربته في Chrome الكناري وهو يعمل.

3
sboisse

مجرد تعيين وزن الخط إلى عادي. يبدو أن هذا يحل المشكلة في Chrome.

لذلك بلدي المغلق الذي يعمل بالنسبة لي هو:

h1.hero-title {
font-family: 'Typefacename', cursive;
font-size:7em;
-webkit-font-smoothing: antialiased;
font-weight:normal;

}

1
David Vaassen

لا يدعم Chrome ميزة مكافحة الأسماء المستعارة إذا لم تكن عبارة عن svg ، فيجب عليك استخدام ظل النص بدلاً من ذلك.

. محدد النص {
 - ظل النص: 
 -1px -1px 0 #fff ، 
 1px -1px 0 #fff ، 
 -1px 1px 0 # ff، 
 1px 1px 0 #fff؛ 
} 
1
Deandré Thomas

لقد بحثت عن حل لهذه المشكلة بالضبط لعدة ساعات ، وأخيراً وجدت شيئًا مناسبًا لي ، لذلك أريد مشاركته معك.

انتقل إلى chrome: // flags/# enable-direct-write إذا تم تعطيل DirectWrite ، فقم بتمكينه ؛ إذا تم تمكين DirectWrite ، فما عليك سوى تعطيله ؛

في حالتي لقد قمت بتمكينه وأنه يعمل بشكل جيد.

في صحتك

0
overRideKode