ฉันจะปรับปรุงลักษณะที่ปรากฏของแบบอักษรใน google chrome ได้อย่างไร


72

ด้านซ้ายคือ firefox 4 ทางด้านขวาคือ chrome 12.

ด้านซ้ายคือ firefox 4 ทางด้านขวาคือ chrome 12 มีวิธีทำแบบอักษรที่ทำให้ Chrome สวยขึ้นหรือไม่?

ภาพด้านบนถูกถ่ายบน windows xp ด้านล่างเป็นอีกตัวอย่างหนึ่งจาก windows 7

ป้อนคำอธิบายรูปภาพที่นี่


Linux หรือ Windows
Nicu Zecheru

ของ windows ภาพหน้าจอด้านบนถูกถ่ายบน windows xp มันดูดีขึ้นเล็กน้อยในเครื่อง windows 7 ของฉัน แต่บางเว็บไซต์ยังคงประสบอยู่ นี่เป็นอีกตัวอย่าง: i.imgur.com/zbuUr.png
hughes

1
แบบอักษรเริ่มต้นของระบบปฏิบัติการเหล่านี้หรือแบบอักษรฝังตัวอยู่หรือไม่ (เช่นผ่าน TypeKit.com)?
สีแดง

1
คุณก็รู้นั่นเป็นคำถามที่ดี มันเห็นได้ชัดเจนที่สุดในแบบอักษรฝังตัว แบบอักษรเริ่มต้นที่ปลอดภัยสำหรับเว็บดูดี ทุกอย่างใน TypeKit.com ดูขรุขระและน่ากลัว
14909 hughes

การเรนเดอร์แบบ TypeKit นั้นดูแตกต่างไปจากการรวมกันของเบราว์เซอร์และระบบปฏิบัติการ :(
แดง

คำตอบ:


35

ตรวจสอบการตั้งค่า ClearType - ภาพหน้าจอของ Chrome ดูเหมือนว่าถูกบังคับให้แสดงผลแบบไม่ต่อต้านนามแฝง สิ่งนี้จะฆ่าแบบอักษรบนเว็บใด ๆ เนื่องจากไม่มีคำแนะนำขาวดำ (สำหรับเหตุผลขนาดต่าง ๆ ) ฉันเคยเห็นสิ่งนี้รายงานว่า "IE ทำให้ข้อความดีขึ้น" เพราะมันละเว้นการตั้งค่า ClearType ระดับระบบปฏิบัติการของคุณและเปิดใช้งานโดยค่าเริ่มต้น


ว้าวนี่เป็นปัญหาทั้งหมด ฉันเดาว่า Firefox จะไม่สนใจการตั้งค่า cleartype ด้วย ขอบคุณ! เพลิดเพลินกับความโปรดปรานของคุณ!
ฮิ

6
" ไม่สนใจการตั้งค่า ClearType ในระดับระบบปฏิบัติการและ " และอะไร
Der Hochstapler

การเปลี่ยนการเร่งด้วย GPU ทำงานสำหรับฉันด้วย ดูlonesysadmin.net/2011/09/12/…
Jimmy Bogard

5
ไปที่ใดเพื่อตรวจสอบการตั้งค่า ClearType
chharvey

1
คำตอบนี้อธิบายวิธีการทำบน XP - ไม่มี "ClearType" ใน Start หรือใน Control Panel superuser.com/a/441694/46972
ashes999

23

คำตอบทั้งหมดนั้นผิด! นี่เป็นข้อผิดพลาดครั้งใหญ่ใน Google Chrome โปรดดูรายงานข้อผิดพลาดอย่างเป็นทางการ / ด้ายรวมถึงภาพหน้าจอจำนวนมากที่นี่: รายงานข้อผิดพลาดอย่างเป็นทางการในรหัส Chrome

วิธีแก้ปัญหาที่ดีที่สุดในปัจจุบันคือการให้องค์ประกอบ / บรรทัดแรกของคุณกับกฎง่ายๆนี้:

-webkit-text-stroke: 1px

เพิ่มเติมจากดร. จอห์น: ฉันพบข้อเสนอแนะที่html { -webkit-text-stroke: 0.25px}สามารถใช้ได้เช่นกัน - พบได้ที่นี่ https://groups.google.com/forum/?fromgroups#!topic/mathjax-users/dV_TmJ1QMO4


สิ่งนี้จะปรับปรุงให้ดียิ่งขึ้นไปอีก ฉันจะเปิดใช้งาน CSS นี้สำหรับไซต์ทั้งหมดโดยค่าเริ่มต้นได้อย่างไร
ShuaiYuan

@shuaiyuancn ขออภัยอะไรนะ ทำไมคุณถึงหมายถึง "ไซต์ทั้งหมด"? มันไม่สมเหตุสมผลเลย
Sliq

1
มันทำให้รู้สึกที่สมบูรณ์แบบ พยายามคิดในฐานะผู้ใช้ปลายทางไม่ใช่นักพัฒนาเว็บตามที่ PO เดิมระบุ ฉันปิดการเขียนโดยตรงใน chrome: // ค่าสถานะและเพิ่มกฎระดับโลก-webkit-text-strokeใน addon อย่างมีสไตล์ ตอนนี้ Chrome ทำให้ฉันมีความสุขมากขึ้น
ShuaiYuan

ฉันสับสนตอนนี้ฉันคิดว่าหลายปีที่superuserหมายถึง linux sudoและเป็นพอร์ทัลสำหรับผู้ใช้ linux ขั้นสูงไม่ใช่สำหรับผู้ใช้ทั่วไปของอินเทอร์เน็ต อืม ... แปลก
Sliq

1
คุณผิดไปหลายปีแล้ว ตรวจสอบสโลแกน: ผู้ใช้ขั้นสูงสำหรับผู้ที่ชื่นชอบคอมพิวเตอร์และผู้ใช้ระดับสูง ฉันไม่คิดว่าผู้ใช้ทั่วไปจะปรับแบบอักษรเช่นนี้เช่นกัน
ShuaiYuan

16

Chrome กำลังอ่านการตั้งค่า ClearType ซึ่งเป็นค่าเริ่มต้นใน Windows XP

  1. หากต้องการแก้ไขปัญหาให้ปิดเบราว์เซอร์ Chrome ก่อน

  2. ตอนนี้คลิกขวาที่ใดก็ได้บนเดสก์ท็อปและเลือก 'คุณสมบัติ' จากเมนูแบบเลื่อนลง

  3. คลิกที่แท็บ 'ลักษณะที่ปรากฏ' ที่อยู่ด้านบนของหน้าต่างใหม่

  4. และคลิกที่ปุ่ม 'ผลกระทบ'

  5. ควรอ่านตัวเลือกที่สอง "ใช้วิธีการต่อไปนี้เพื่อปรับขอบแบบอักษรบนหน้าจอให้ราบรื่น"

  6. เลือกตัวเลือก "ClearType"

  7. คลิกใช้ & เปิดเบราว์เซอร์ Chrome ของคุณใหม่

นับจากนี้ไป Chrome จะทำให้แบบอักษรของคุณต่อต้านนามแฝงได้อย่างสวยงามเพื่อเอฟเฟกต์ที่ราบรื่น


2
สิ่งนี้ใช้ได้กับฉัน แต่มีตัวเลือกแตกต่างกันเล็กน้อยใน Windows 7
Gearoid Murphy

2
มันทำงานได้โดยไม่ต้องรีสตาร์ท Chrome
Quazi Irfan

มันไม่ทำงานสำหรับฉันใน XP จนกว่าฉันจะรีสตาร์ท Chrome
ashes999

1
Windows 8: แผงควบคุม> จอแสดงผล> ปรับข้อความ ClearType> ดำเนินการต่อด้วยตัวช่วยสร้างถัดไปถัดไป รีสตาร์ทเบราว์เซอร์ - ที่ช่วย
rook

ฉันต้องรีสตาร์ทคอมพิวเตอร์เพื่อให้การเปลี่ยนแปลง ClearType ของฉันมีผลกับ Windows 10 โซลูชันที่ยอดเยี่ยม BTW!
Sandman ง่าย ๆ

12

วางไฟล์ SVG ที่สูงขึ้นในกฎ css แบบอักษรหน้า 1 หรือวินาทีตัวอย่างเช่น:

@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 ตัวอย่าง


ขอบคุณมาก!! ในโครงการที่ผ่านมาฉันสังเกตเห็นว่า OTF ดูดีมากเช่นกันฉันลองมันในโครงการอื่นและมันก็ดูแย่มาก! SVG ดูดีจริงๆ =)
zzz

6

คุณเปิดใช้งานการเร่งความเร็ว GPU ใน Google Chrome หรือไม่ พิมพ์about:flagsและค้นหา GPU Accelerated Canvas 2Dปิดใช้งานหากเปิดใช้งาน แบบอักษรในบางเว็บไซต์ดูขรุขระเมื่อฉันเรียกดูเมื่อเปิดใช้งานการเร่งความเร็ว


ฉันเคยมีการเปิดใช้งานด้วยตัวเอง แต่หลังจากรุ่น 10 การแสดงผลแบบอักษรจึงได้รับความนิยม ฉันหวังว่า Google จะแก้ไขปัญหาในบางจุด
สีแดง

มันถูกปิดการใช้งาน ฉันพยายามเปิดใช้งานชั่วคราวเพื่อดูว่าจะเกิดอะไรขึ้นและสังเกตเห็นว่าไม่แตกต่าง
ฮิ

Alright ในกรณีที่คุณจัดการเพื่อค้นหาสิ่งที่ผิดโปรดอย่าลืมอัปเดตที่นี่
สีแดง

ในกรณีของฉันการปิดใช้งานการเร่ง GPU แก้ไขนามแฝง
kcbanner

ทำงานให้ฉัน! Windows 7, Chrome 52
Vincent

2

ภายใน Google Chrome คลิกที่ประแจ> ตัวเลือก> ภายใต้ฮูด> [ถัดจากเนื้อหาเว็บ] คลิกกำหนดแบบอักษรเอง

เปลี่ยนการตั้งค่าของคุณเพื่อให้หน้าของคุณดูเหมือนของฉันหน้าจอตัวเลือกของฉัน

จากนั้นคลิกที่ x และดูว่าปัญหาของคุณได้รับการแก้ไขหรือไม่

หากไม่สามารถแก้ไขได้อาจมีอีกอย่างหนึ่ง ... แต่ฉันจะรอจนกว่าคุณจะลอง


เหมือนกันอยู่แล้ว: i.imgur.com/zhTBS.pngแม้ว่าคุณจะสังเกตเห็นว่าแม้จะเปรียบเทียบภาพหน้าจอของเราแล้วแบบอักษรเริ่มต้นจะขรุขระมากบนเครื่องของฉัน
hughes

ตกลง ... ใครเป็นคนทำการ์ดวิดีโอของคุณ
wizlog

นอกจากนี้ ... ไปที่google.com/webfontsทุกคนล้วนสับสนเหมือนกัน? ฉันรู้ว่าคุณไปที่ typekit.com ... แต่สิ่งนี้อาจแตกต่างกัน ลองค้นหาตัวกรองที่แตกต่างกันและดูว่าปัญหาของคุณมีผลกับตัวกรองทั้งหมดหรือไม่ (เช่นมันเป็นแค่ serif หรือ ... )
wizlog

3
สิ่งนี้จะเปลี่ยนรูปแบบอักษร ("แบบอักษร") มันมีอะไรจะทำอย่างไรกับตัวอักษรแสดงผล
Andres Riofrio

2

Chrome ไม่สามารถแสดงแบบอักษรบนเว็บได้ในขณะนี้ มีข้อบกพร่องหลายประการในการติดตามปัญหาของพวกเขาสำหรับเรื่องนี้ โปรดติดดาวที่เกี่ยวข้องกับคุณเพื่อให้ความสนใจมากขึ้น


2

ฉันมีปัญหาเดียวกันทุกประการแสดงผล webfonts จากhttp://www.google.co.th/webfontsใน Chrome ฉันลองใช้คำแนะนำทั้งหมดเกี่ยวกับสิ่งนี้และไซต์อื่น ๆ อีกสองแห่งและไม่ทำงานเลย

ในที่สุดฉันก็เริ่มตรวจสอบคุณสมบัติ CSS ของข้อความที่ได้รับผลกระทบมันกลับกลายเป็นสีตัวอักษรจริงที่เป็นสาเหตุของปัญหา ชื่อที่ระบุcolor:#454545จะแสดงผลไม่ดี แต่ชื่อเดียวกันที่ระบุมีดังต่อไปนี้: color:#333ทำงานได้ดี ขอบคุณพระเจ้าสำหรับสไตล์ชีทตัวแทนเฉพาะผู้ใช้!


2

ใน Windows XP ฉันเพิ่งเปลี่ยนตัวเลือก anti-alias จาก "Default" เป็น "Clear Type" ใน
Display → Properties →ลักษณะ→ลักษณะที่ปรากฏ→ VisualEffects


2

Chrome ใช้ค่า clearType ของระบบสำหรับแบบอักษร ดูดีขึ้นใน Windows 7 อธิบายว่า สำหรับ Mac ฉันใช้ Anti-aliasing สำหรับฟอนต์ทั้งหมดที่มีขนาดใหญ่กว่า 8 ฉันคิดว่า ลองเปิดหรือเปลี่ยน clearType ของเครื่อง Windows ของคุณ

อัปเดต : ดูเหมือนว่า Chrome 22 ขึ้นไปจะไม่สนใจการตั้งค่าระบบสำหรับclearType


1

ฉันมีปัญหานี้อย่างรุนแรงใน Windows XP SP3 ที่ทำให้ Chrome ไม่สามารถใช้งานได้ตามเจตนาและวัตถุประสงค์ทั้งหมด ฉันสังเกตเห็นว่าฉันได้ติดตั้ง Clear Type Tuning ในแผงควบคุมและลองยกเลิกการเลือก "Enable Font Smoothing" ในแท็บขั้นสูง หลังจากรีสตาร์ท Chrome มันก็โอเคแม้ว่าจะเปิด Font Smoothing อีกครั้งก็ตาม ฉันตัดสินใจที่จะทำเครื่องหมายในช่อง "ใช้การตั้งค่าทั้งหมดกับค่าเริ่มต้นสำหรับผู้ใช้และระบบใหม่"


1

สำหรับฉันมันไม่ใช่การตั้งค่า ClearType ใน Windows 10.1 x64 แต่มันกลับกลายเป็นการตั้งค่าในเบราว์เซอร์ Chrome ของฉันที่ชื่อว่า DirectWrite

  1. ในแถบที่อยู่ของคุณในประเภท Chrome: chrome://flags/#directwrite
  2. และเปิดใช้งาน DirectWrite ชื่อของการตั้งค่านี้จะปิดใช้งาน DirectWriteและตรวจสอบให้แน่ใจว่าปุ่มที่อยู่ใต้นั้นแสดงคำว่า: เปิดใช้งาน

ที่แก้ไขปัญหาสำหรับฉัน


0

ดูเหมือนว่าคำตอบที่ยาวและยากคือคุณไม่สามารถทำได้ มีการพูดคุยและคำแนะนำมากมายในความช่วยเหลือของ Chromeแต่ฉันไม่เห็นว่ามีอะไรคุ้มค่าที่จะแนะนำ

คำถามใหญ่คือคุณจะทำให้มันดูแย่จังได้ยังไง! ฉันใช้ Chrome พิมพ์ลงในช่องนี้ ... ฉันยังซูมเข้าเป็นกลุ่มเต็มและฉันไม่เห็นอะไรเหมือนคุณ หากคุณยังคงมีคำถามหลังจากนี้คุณควรอธิบายการกำหนดค่าของคุณไปยังชุมชน


0

แม้ว่า Chrome นั้นจะ "ใช้งานได้" สำหรับแบบอักษร แต่ก็ดูบางและถูกลบล้างโดยที่มันจะแสดงเส้นทแยงมุมโดยเฉพาะ IE แสดงผลได้ดีกว่ามาก แต่ IE เป็นเบราว์เซอร์ที่ช้ากว่าและดังนั้นจึงเป็น FireFox

ฉันเชื่อว่านี่เป็นส่วนหนึ่งของโครเมี่ยม

BTW, HackToHell ฉันจะไปเปลี่ยนสีการแสดงผลได้ที่ไหน

ฉันจะลองสิ่งนี้


0

กด windows key + r แล้วพิมพ์ cttune.exe ในนั้น

วิธีการอื่นคือกดปุ่ม windows จากนั้นพิมพ์ cleartype จากนั้นเลือก Adjust ClearType Text

และทำตามคำแนะนำหากคุณยังมีปัญหาลองตัวอย่างอื่น ๆ

สิ่งนี้ได้ผลสำหรับฉันคุณต้องลองตัวอย่างที่แตกต่างกันมากเช่นการปรับเทียบความคมชัด / ความสว่าง แต่สำหรับข้อความแทน

FYI: การปิดใช้งานการเร่งความเร็วแบบ 2d อาจช่วยให้ Chrome ใช้เล่นกับเครื่องมือปรับแต่ง windows cleartype


0

หากคุณต้องการให้แบบอักษรบนเว็บสามารถอ่านได้ในขณะที่ยังคงปิดใช้งานการปรับแบบอักษรให้เรียบ / cleartype แสดงว่าโซลูชันนั้นคือปิดใช้งานเว็บแบบอักษรใน Google Chrome ในกรณีเช่นนี้เบราว์เซอร์จะใช้แบบอักษรมาตรฐานของระบบปฏิบัติการซึ่งแสดงผลอย่างถูกต้องเมื่อปิดการใช้งานประเภท / การปรับให้เรียบ โดยให้ส่ง/disable-remote-fontsค่าสถานะไปที่ chrome.exe คลิกที่ปุ่มทางลัดบน Google Chrome บนเดสก์ท็อปเลือกคุณสมบัติไปที่แท็บทางลัดและตั้งค่าเป้าหมายเป็น:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" /disable-remote-fonts

อาจมีปัญหาหนึ่งที่เว็บฟอนต์ถูกปิดใช้งาน หากเว็บไซต์ใช้ไอคอนจากแบบอักษรบนเว็บเว็บไซต์นั้นจะไม่แสดงผล

ปัญหาที่เกี่ยวข้องใน Chromium tracker:

"การตั้งค่า ClearType ทั่วทั้งระบบไม่ได้รับการยอมรับสำหรับแบบอักษรบนเว็บ" https://code.google.com/p/chromium/issues/detail?id=319429


0

ไปchrome://flags/(หรือabout:flags) และปิดการใช้งานตัวเลือกแทนที่ซอฟต์แวร์รายชื่อการแสดงผล

ผ้าใบ 2 มิติแบบเร่งควรปิดใช้งานด้วย

การรวมกันนั้นช่วยฉันได้


-1

ไปที่ chrome: // flags / และตั้งค่า "การลดรอยหยักข้อความ LCD" เป็นเปิดใช้งาน รีสตาร์ทเบราว์เซอร์

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.