سؤال كيف يمكنني تحسين مظهر الخط في google chrome؟


On the left is firefox 4, on the right is chrome 12.

على اليسار هو فايرفوكس 4 ، على اليمين هو الكروم 12. هل هناك طريقة لجعل الخطوط أجمل كروم تجعل؟

أخذت الصورة أعلاه على ويندوز إكس بي. فيما يلي مثال آخر من ويندوز 7.

enter image description here


71
2017-07-08 14:32


الأصل


لينكس أو ويندوز؟ - Nicu Zecheru
شبابيك. لقطة الشاشة أعلاه مأخوذة على windows xp. يبدو أفضل قليلاً على جهاز windows 7 ، لكن بعض المواقع بالتأكيد ما زالت تعاني. إليك مثال آخر: i.imgur.com/zbuUr.png - hughes
هل هذه الخطوط OS الافتراضية أو الخطوط المضمنة؟ (مثل عبر TypeKit.com)؟ - red
أنت تعرف ، هذا سؤال جيد. إنه أكثر ما يلفت الانتباه على الخطوط المضمنة. الخطوط الافتراضية آمنة على شبكة الإنترنت تبدو على ما يرام. كل شيء على TypeKit.com يبدو خشنة ومروّعة. - hughes
يبدو أن عرض TypeKit مختلف حقًا في مجموعات مختلفة من نظام التشغيل / المتصفح ، للأسف. :( - red


الأجوبة:


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


35
2017-07-12 20:40



واو ، هذه كانت المشكلة برمتها. أعتقد أن Firefox يتجاهل إعدادات cleartype أيضًا. شكر! استمتع بك فضله! - hughes
"يتجاهل إعدادات ClearType على مستوى نظام التشغيل و" و ماذا؟ - Der Hochstapler
أيضا تحول من تسارع GPU عملت بالنسبة لي. نرى lonesysadmin.net/2011/09/12/... - Jimmy Bogard
أين سيذهب المرء للتحقق من إعدادات ClearType؟ - chharvey
تشرح هذه الإجابة كيفية القيام بذلك على XP - لا يوجد "ClearType" في Start أو في Control Panel. superuser.com/a/441694/46972 - ashes999


كل هذه الإجابات خاطئة! هذا خطأ كبير في Google Chrome ، الرجاء الاطلاع على تقرير / مؤشر الخطأ الرسمي بما في ذلك الكثير من لقطات الشاشة هنا: تقرير الخطأ الرسمي على رمز Chrome

أفضل حل بديل هو إعطاء العنصر / العنوان ببساطة هذه القاعدة البسيطة:

-webkit-text-stroke: 1px

إضافة من الدكتور جون: لقد وجدت اقتراح ذلك html { -webkit-text-stroke: 0.25px} ستعمل كذلك - وجدت هنا https://groups.google.com/forum/؟fromgroups#!topic/mathjax-users/dV_TmJ1QMO4


23
2018-03-24 01:22



هذا يحسن ذلك. كيف أقوم بتمكين CSS لكل المواقع بشكل افتراضي؟ - ShuaiYuan
shuaiyuancn عذرا ، ماذا؟ لماذا تقصد ب "جميع المواقع"؟ هذا لا يجعل من أي معنى. - Sliq
هذا منطقي تمامًا. حاول أن تفكر كمستخدم نهائي ، وليس مطور ويب ، كما يشير PO الأصلي. أوقفت الكتابة المباشرة في chrome: // flags وأضفت قاعدة عامة لـ -webkit-text-stroke في الملحق الأنيق. الآن يعطيني Chrome مزيدًا من المتعة. - ShuaiYuan
أنا مرتبك الآن ، فكرت لسنوات ذلك الخارق تقف على لينكس سودو وهي بوابة لمستخدمي Linux المتقدمين ، وليس للمستخدمين المشتركين للإنترنت. هممم ... غريب. - Sliq
لقد كنت مخطئا منذ سنوات. تحقق من سطر الوصف: Super User لهواة الكمبيوتر ومستخدمي الطاقة. لا أعتقد أن المستخدمين المشتركين سيضبطون الخطوط مثل هذا ، أيضًا. - ShuaiYuan


يقرأ Chrome إعداد ClearType الذي يتم إيقاف تشغيله على نظام التشغيل Windows XP افتراضيًا.

  1. لإصلاح المشكلة ، أغلق متصفح Chrome أولاً.

  2. الآن انقر بزر الماوس الأيمن في أي مكان على سطح المكتب وحدد "خصائص" من القائمة المنسدلة.

  3. انقر فوق علامة التبويب "المظهر" الموجودة على الجزء العلوي في النافذة الجديدة.

  4. وانقر على زر "التأثيرات".

  5. يجب قراءة الخيار الثاني لأسفل ، "استخدم الطريقة التالية لتسهيل حواف خطوط الشاشة."

  6. حدد الخيار "ClearType".

  7. انقر على تطبيق & Re-open متصفح Chrome.

من الآن فصاعدًا ، سيعرض Chrome الخطوط الخاصة بك بشكل متناسق لمثل هذا التأثير السلس.


16
2018-06-26 12:00



هذا العمل بالنسبة لي ، خيارات مختلفة قليلا على ويندوز 7 رغم ذلك - Gearoid Murphy
يعمل دون إعادة تشغيل الكروم. - Quazi Irfan
لم يعمل لي على XP حتى أعيد تشغيل Chrome. - ashes999
Windows 8: لوحة التحكم> الشاشة> ضبط نص ClearType> تابع مع المعالج التالي التالي. إعادة تشغيل المتصفح - يساعد. - rook
اضطررت أيضا إلى إعادة تشغيل جهاز الكمبيوتر الخاص بي للسماح بتطبيق تغييرات ClearType الخاصة بي في Windows 10. حل رائع BTW! - Simple Sandman


ضع ملف SVG أعلى في قاعدة css font-face ، إما أولًا أو ثانيًا على سبيل المثال:

@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg'),
     url('fonts/gothamrnd-book-webfont.woff') format('woff'),
     url('fonts/gothamrnd-book-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

بدلا من:

@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/gothamrnd-book-webfont.woff') format('woff'),
     url('fonts/gothamrnd-book-webfont.ttf') format('truetype'),
     url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg');
font-weight: normal;
font-style: normal;
}

يمكن رؤية أمثلة هذا الإصلاح هنا:

أمثلة FontSpring
أمثلة Adtrak


12
2017-08-06 09:16



شكرا جزيلا!! في مشروع سابق لاحظت أن OTF بدت جيدة كذلك ، لقد حاولت ذلك في مشروع آخر وبدا رهيبا! يبدو SVG جيدًا جيدًا =) - zzz


هل تم تمكين تسريع GPU في Google Chrome؟ نوع about:flags وابحث عن GPU Accelerated Canvas 2D، تعطيلها إذا مكنت. الخطوط على بعض المواقع تظهر خشنة حقا عندما كنت تصفح مع تمكين التسريع.


6
2017-07-12 06:23



اعتدت أن أكون قد مكنت نفسي ، ولكن بعد الإصدار 10 ، تم تقديم الخط. آمل أن تعالج Google المشكلة في وقت ما. - red
كان معطل. حاولت مؤقتًا تمكينها فقط من رؤية ما سيحدث ، ولاحظت عدم وجود فرق. - hughes
حسنا. إذا تمكنت من العثور على ما هو خطأ ، فتذكر تحديثه هنا. - red
في حالتي ، أدى تعطيل تعطيل GPU إلى إصلاح التعرجات. - kcbanner
عملت لي! Windows 7 ، Chrome 52 - Vincent


داخل Google Chrome ، انقر على مفتاح الربط> الخيارات> الخيارات المتقدمة> [بجانب محتوى الويب] انقر على تخصيص الخطوط.

غيّر إعداداتك بحيث تبدو صفحتك مثل صفحتكMy options screen

ثم انقر فوق x ، وتحقق مما إذا كانت مشكلتك ثابتة.

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


2
2017-07-12 18:56



متطابقة بالفعل: i.imgur.com/zhTBS.png على الرغم من أنك ستلاحظ أنه حتى مقارنة لقطات الشاشة لدينا ، فإن الخطوط الافتراضية تكون خشنة للغاية على جهازي. - hughes
حسنا ... من يجعل بطاقة الفيديو الخاصة بك؟ - wizlog
أيضا ... اذهب إلى google.com/webfonts هل كل هؤلاء هم فقط الذين عابثوا؟ أعلم أنك ذهبت إلى kindkit.com ... لكن هذا قد يكون مختلفًا. حاول أن تبحث من خلال الفلاتر المختلفة ولاحظ ما إذا كانت مشكلتك تنطبق على جميع هذه العناصر (على سبيل المثال ، هل هي فقط serif أو ...) - wizlog
هذا يغير الخطوط ("الخطوط"). لا علاقة لها بالخط استدعاء. - Andres Riofrio


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


2
2017-07-19 13:09