ฉันใช้ google webfonts และพวกเขาก็ปรับขนาดตัวอักษรให้ใหญ่สุด แต่ที่ 18px พวกมันดูแย่มาก ฉันได้อ่านที่นี่และมีคำตอบสำหรับการทำให้แบบอักษรเรียบ แต่ฉันไม่พบสิ่งที่อธิบายอย่างชัดเจนและตัวอย่างบางส่วนที่ฉันพบไม่ทำงานเลย

h4หน้าตาของฉันแย่มากในทุกเบราว์เซอร์ แต่ Chrome นั้นแย่ที่สุด ใน Chrome แบบอักษรทั้งหมดของฉันดูแย่มาก

ใครช่วยชี้ฉันในทิศทางที่ถูกต้องได้ไหม บางทีคุณอาจรู้จักทรัพยากรที่อธิบายสิ่งนี้อย่างชัดเจน? ขอบคุณ!

หน้าจอตัวอย่าง # 1

ภาพหน้าจอนี้แสดงหน้าแรกของhttps://www.dartlang.org/ภาษาการเขียนโปรแกรมที่ทำโดย Google (เพื่อให้เราสามารถบอกได้ว่าเว็บไซต์นี้สร้างโดย Google) และใช้ Google Webfonts

สกรีนช็อตแสดง Google Chrome ทางซ้าย Firefox / Internet Explorer ทางขวา:

หน้าจอตัวอย่าง # 2

ภาพหน้าจอนี้แสดงหน้าข้อมูลผลิตภัณฑ์ใน Adobe.com โดยใช้ webfonts ที่จัดทำโดย Typekit Adobe & Typekit เป็นมืออาชีพเมื่อพูดถึงแบบอักษร

ภาพหน้าจอแสดง Google Chrome ทางด้านขวา Firefox / Internet Explorer ทางด้านซ้าย:

สถานะของปัญหามิถุนายน 2014: แก้ไขด้วย Chrome 37

สุดท้ายทีม Chrome จะปล่อยการแก้ไขสำหรับปัญหานี้ด้วย Chrome 37 ซึ่งจะเผยแพร่สู่สาธารณะในเดือนกรกฎาคม 2014 ดูตัวอย่างการเปรียบเทียบ Chrome 35 ที่เสถียรในปัจจุบันและ Chrome 37 ล่าสุด (ตัวอย่างก่อนการพัฒนาเร็ว) ที่นี่:

สถานะของปัญหาธันวาคม 2013

1. ) มีไม่มีทางออกที่เหมาะสมเมื่อโหลดแบบอักษรผ่านทาง@import, หรือของ Google<link href= webfont.jsปัญหาคือ Chrome เพียงแค่ขอไฟล์. woffจาก API ของ Google ซึ่งแสดงผลได้อย่างน่ากลัว น่าแปลกใจที่ไฟล์ฟอนต์ประเภทอื่น ๆ มีความสวยงาม อย่างไรก็ตามมีเทคนิค CSS บางอย่างที่จะ "ทำให้" แบบอักษรที่เรนเดอร์เรียบขึ้นเล็กน้อยคุณจะพบวิธีแก้ปัญหาที่ลึกกว่าในคำตอบนี้

2. ) มีวิธีแก้ปัญหาที่แท้จริงสำหรับเรื่องนี้เมื่อทำการโฮสต์ฟอนต์ด้วยตนเองซึ่งโพสต์ครั้งแรกโดยJaime Fernandezในคำตอบอื่นในหน้า Stackoverflow นี้ซึ่งแก้ไขปัญหานี้ได้โดยการโหลดแบบอักษรบนเว็บในลำดับพิเศษ ฉันรู้สึกไม่ดีที่จะคัดลอกคำตอบที่ยอดเยี่ยมของเขาดังนั้นโปรดดูที่นั่น นอกจากนี้ยังมีโซลูชัน (ไม่ได้รับการพิสูจน์) ที่แนะนำให้ใช้แบบอักษร TTF / OTF เท่านั้นเนื่องจากเบราว์เซอร์เกือบทุกตัวรองรับแล้ว

3. ) ทีมนักพัฒนาซอฟต์แวร์ Google Chrome ทำงานเกี่ยวกับปัญหานั้น เนื่องจากมีการเปลี่ยนแปลงครั้งใหญ่หลายครั้งในเอ็นจิ้นการเรนเดอร์

ฉันได้เขียนโพสต์บล็อกขนาดใหญ่เกี่ยวกับปัญหานั้นอย่าลังเลที่จะดู: วิธีการแก้ไขการแสดงผลแบบอักษรน่าเกลียดใน Google Chrome

ตัวอย่างที่ทำซ้ำได้

ดูตัวอย่างจากคำถามเริ่มต้นในวันนี้ได้อย่างไรใน Chrome 29:

ตัวอย่างเชิงบวก:

ซ้าย: Firefox 23 ขวา: Chrome 29

ตัวอย่างเชิงบวก:

ด้านบน: Firefox 23 ด้านล่าง: Chrome 29

ตัวอย่างเป็นลบ: Chrome 30

ตัวอย่างเป็นลบ: Chrome 29

สารละลาย

แก้ไขภาพหน้าจอด้านบนด้วย -webkit-text-stroke:

แถวแรกเป็นค่าเริ่มต้นแถวที่สองมี:

-webkit-text-stroke: 0.3px;

แถวที่สามมี:

-webkit-text-stroke: 0.6px;

ดังนั้นวิธีการแก้ไขแบบอักษรเหล่านั้นก็คือให้พวกเขา

-webkit-text-stroke: 0.Xpx;

หรือไวยากรณ์ RGBa (โดย nezroy พบได้ในความคิดเห็น! ขอบคุณ!)

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

นอกจากนี้ยังมีความเป็นไปได้ที่ล้าสมัย : ให้เงาที่เรียบง่าย (ปลอม):

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

โซลูชัน RGBa (พบในบล็อกของ Jasper Espejo):

text-shadow: 0 0 1px rgba(51,51,51,0.2);

ฉันโพสต์บล็อกในเรื่องนี้:

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

คำตอบเดิมของฉัน:

ปัญหานี้เป็นปัญหาใหญ่ใน Google Chrome และทีมงาน Google Chrome ไม่ทราบเกี่ยวกับเรื่องนี้ดูรายงานข้อผิดพลาดอย่างเป็นทางการที่นี่ ปัจจุบันในเดือนพฤษภาคม 2556 แม้กระทั่ง 11 เดือนหลังจากรายงานข้อผิดพลาดก็ยังไม่ได้รับการแก้ไข เป็นเรื่องแปลกที่เบราว์เซอร์เดียวที่ทำให้ Google Webfonts เป็นเบราว์เซอร์ของ Google Chrome (!) แต่มีวิธีแก้ไขง่ายๆที่จะแก้ไขปัญหาโปรดดูวิธีการแก้ปัญหาด้านล่าง

งบจากทีมพัฒนาของ Google Chrome, พฤษภาคม 2013

แถลงการณ์อย่างเป็นทางการในความคิดเห็นรายงานข้อผิดพลาด:

การแสดงแบบอักษร Windows ของเรากำลังดำเนินการอยู่ ... เราหวังว่าจะมีบางอย่างภายในไม่กี่ก้าวที่นักพัฒนาซอฟต์แวร์สามารถเริ่มเล่นได้ ความเสถียรของมันจะเร็วแค่ไหนเช่นเคยเกี่ยวกับความรวดเร็วที่เราสามารถหยั่งรากและเผาผลาญความถดถอย

ฉันมีปัญหาเดียวกันและฉันพบวิธีแก้ปัญหาในโพสต์ของ Sam Goddardนี้

วิธีการแก้ปัญหาถ้าจะกำหนดเรียกร้องให้ตัวอักษรสองครั้ง ก่อนอื่นขอแนะนำให้ใช้สำหรับเบราว์เซอร์ทั้งหมดและหลังจากการโทรเฉพาะสำหรับ Chrome ที่มีการสืบค้นสื่อพิเศษ:

@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;
}

@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 ไม่แสดงแบบอักษรเช่น Firefox หรือเบราว์เซอร์อื่นใด โดยทั่วไปนี่เป็นปัญหาใน Chrome ที่ทำงานบน Windows เท่านั้น ถ้าคุณต้องการทำให้แบบอักษรราบรื่นให้ใช้-webkit-font-smoothingคุณสมบัติบนh4แท็กyer เช่นนี้

h4 {
    -webkit-font-smoothing: antialiased;
}

นอกจากนี้คุณยังสามารถใช้subpixel-antialiasedสิ่งนี้จะทำให้คุณปรับให้เรียบในแบบที่แตกต่างกัน อย่างไรก็ตามคุณจะต้องมีเวอร์ชันทุกคืนเพื่อดูผลกระทบ คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับตัวอักษรที่ราบเรียบที่นี่

ตกลงคุณสามารถใช้สิ่งนี้ได้ง่ายๆ

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

ตรวจสอบให้แน่ใจว่าสีข้อความและความกว้างของข้อความบนของคุณต้องให้ฉันเหมือนกันทุกประการ

ฉันจะบอกก่อนว่าสิ่งนี้จะไม่ได้ผลเสมอฉันได้ทดสอบสิ่งนี้ด้วยsans-serifแบบอักษรและแบบอักษรภายนอกเช่นopen sans

บางครั้งเมื่อคุณใช้แบบอักษรขนาดใหญ่ให้ลองประมาณfont-size:49pxและขึ้นไปข้างบน

นี่คือข้อความส่วนหัวที่มีขนาด 48px ( font-size:48px;ในองค์ประกอบที่มีข้อความ)

แต่ถ้าคุณเพิ่ม 48px เป็นfont-size:49px;(และ 50px, 60px, 80px, ฯลฯ ... ) สิ่งที่น่าสนใจก็เกิดขึ้น

ข้อความจะเรียบโดยอัตโนมัติและดูเหมือนดีจริงๆ

อีกด้านหนึ่ง ...

หากคุณกำลังมองหาแบบอักษรเล็ก ๆ คุณสามารถลองสิ่งนี้ แต่ไม่มีประสิทธิภาพมากนัก

กับพาเรนต์ของข้อความเพียงใช้คุณสมบัติ css ถัดไป: -webkit-backface-visibility: hidden;

คุณสามารถแปลงบางสิ่งเช่นนี้:

สำหรับสิ่งนี้:

(ตัวอักษรเป็นKreon)

พิจารณาว่าเมื่อคุณไม่ได้วางทรัพย์สินนั้น-webkit-backface-visibility: visible;จะได้รับมรดก

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

อีกข้อเท็จจริงที่น่าสนใจ:

-webkit-backface-visibility: hidden;จะทำงานได้เช่นกันเมื่อคุณแปลงข้อความใน Chrome (ด้วย-webkit-transformคุณสมบัติซึ่งรวมถึงการหมุน, การเอียงและอื่น ๆ )

ไม่มี -webkit-backface-visibility: hidden;

กับ -webkit-backface-visibility: hidden;

ฉันไม่รู้ว่าทำไมการฝึกซ้อมแบบนี้ถึงได้ผล ขออภัยภาษาอังกฤษของฉันแปลก