Webfont Smoothing และ Antialiasing ใน Firefox และ Opera

112

ฉันมีแบบอักษรสำหรับเว็บแบบกำหนดเองที่ใช้ในไซต์ของฉัน ในการจัดรูปแบบเอาต์พุตการเรนเดอร์ของฉันฉันใช้รหัสต่อไปนี้:

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

ใช้งานได้ดีบน Safari และ Chrome (ขอบคมกว่าและเส้นบางลง) มีวิธีใดบ้างในการปรับใช้สไตล์เดียวกันบน Firefox และ Opera

— ด้าน
แหล่งที่มา

5

เป็นความคิดที่ดีที่จะหยุดทำเช่นนั้นและอ่านสาเหตุที่นี่: usabilitypost.com/2012/11/05/stop-fixing-font-smoothing

— fregante

20

^ นี่เป็นลักษณะทั่วไปที่กว้างและใช้การปรับแบบอักษรให้เรียบได้ดี เป็นปัญหาการแสดงผลที่เป็นปัญหาไม่ใช่พฤติกรรมของนักออกแบบ เมื่อคุณออกแบบเลย์เอาต์และฟอนต์ดูเหมือนจะกึ่งตัวหนาเนื่องจากเอนจินการเรนเดอร์มันเป็นเอนจิ้นที่ต้องแก้ไขไม่ใช่เลย์เอาต์

— Dylan

1

มันไม่ได้เป็นการสรุปแบบกว้าง ๆ ทั้งหมด บทความกล่าวว่าการเรนเดอร์พิกเซลย่อยมีจุดมุ่งหมายเพื่อสร้างข้อความสีอ่อนบนพื้นหลังสีเข้มให้อ่านง่ายขึ้น (เช่นเข้าถึงได้) และการสร้างคำจำกัดความ CSS แบบกว้าง ๆ เช่นbody { -webkit-font-smoothing: antialiased; }นั้นหนักเกินไป

— Matt Scheurich

3

แบบอักษรบนเว็บของฉันที่มืดบนพื้นหลังสีอ่อนจะได้รับ "faux bolded" เช่นกัน ฉันพูด "ลบรอยหยัก" ทุกรอบ

— Jason T Featheringham

5

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

— Beejor

193

เนื่องจาก Opera ใช้พลังงานจาก Blink เนื่องจากเวอร์ชัน 15.0 -webkit-font-smoothing: antialiasedทำงานบน Opera ได้เช่นกัน

ในที่สุด Firefox ได้เพิ่มคุณสมบัติเพื่อเปิดใช้งานการลบรอยหยักสีเทา หลังจากการสนทนาเป็นเวลานานมันจะพร้อมใช้งานในเวอร์ชัน 25 พร้อมกับไวยากรณ์อื่นซึ่งชี้ให้เห็นว่าคุณสมบัตินี้ใช้งานได้บน OS X เท่านั้น

-moz-osx-font-smoothing: grayscale;

สิ่งนี้ควรแก้ไขแบบอักษรไอคอนที่พร่ามัวหรือข้อความสีอ่อนบนพื้นหลังสีเข้ม

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

คุณสามารถอ่านโพสต์ของฉันเกี่ยวกับการแสดงผลแบบอักษรบน OSXซึ่งรวมถึง Sass mixin เพื่อจัดการคุณสมบัติทั้งสอง

— Maximilian Hoffmann
แหล่งที่มา

6

ทำไมต้อง OSX เท่านั้น ??

— Yassir Ennazk

7

Windows และ Linux ใช้อัลกอริธึมการเรนเดอร์สำหรับฟอนต์ที่แตกต่างจาก OSX

— Maximilian Hoffmann

15

Firefox ไม่รองรับอะไรทำนองนั้น

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

คุณสมบัตินี้รองรับเฉพาะในเบราว์เซอร์ Webkit

หากคุณต้องการทางเลือกอื่นคุณสามารถตรวจสอบสิ่งนี้:

— โจนาธานนากูอิน
แหล่งที่มา

2

ปัญหาที่ฉันพบคือแบบอักษรของฉันมีลักษณะ "หนา" และป่องใน firefox และ opera ด้วย-webkit-font-smoothing:antialiased;ฉันสามารถแก้ไขได้ใน Safari และ Chrome ฉันชอบที่จะหา "แฮ็ก" ใด ๆ เพื่อทำให้ฟอนต์ของฉันจางลงเล็กน้อยใน Firefox เช่นกัน ฉันคิดว่าจะใช้สีขาวtext-shadowกับมันใน moz เท่านั้น แต่ไม่มีวิธีใดที่จะใช้เงาข้อความแบบ "inset" ที่จะทำให้ตัวอักษรเบาลง

— แมตต์

1

@matt คุณสามารถลองใช้คำแนะนำ CSS ในคำถามนี้: stackoverflow.com/questions/761778/…บางทีคุณอาจพบทางเลือก CSS

— Jonathan Naguin

11

กรณี: ข้อความสีอ่อนที่มีแบบอักษรเว็บหยักบนพื้นหลังสีเข้ม Firefox (v35) / Windows
ตัวอย่าง: Google Web Font Ruda

โซลูชันที่น่าแปลกใจ -
การเพิ่มคุณสมบัติต่อไปนี้ให้กับตัวเลือกที่ใช้:

selector {
    text-shadow: 0 0 0;
}

อันที่จริงผลลัพธ์ก็เหมือนกันtext-shadow: 0 0;แต่ฉันชอบตั้งค่ารัศมีเบลออย่างชัดเจน

ไม่ใช่วิธีแก้ปัญหาที่เป็นสากล แต่อาจช่วยได้ในบางกรณี นอกจากนี้ฉันยังไม่เคยพบผลกระทบด้านประสิทธิภาพเชิงลบ (ยังไม่ได้ทดสอบอย่างละเอียด) ของโซลูชันนี้

— โวลเคอร์อี
แหล่งที่มา

ไม่ช่วยอะไรเลย

— vsync

สิ่งนี้จะทำให้เกิดฟอนต์ที่โดดเด่นขึ้นบนโครเมี่ยมตามแบบอักษร

— Ben Sewards

1

@BenSewards คุณช่วยจัดหาแบบอักษรที่คุณพบในการแสดงผลแบบอักษรที่โดดเด่นกว่านี้หรือไม่? หรือแม้กระทั่ง CodePen? ขอบคุณล่วงหน้า.

— Volker E.

1

@VolkerE ขอบคุณสำหรับโซลูชันที่ยอดเยี่ยม ฉันมีปัญหาที่น่ารำคาญเหมือนกันกับ Source Code Pro Font ใน Sticky Header เมื่อฉันเลื่อนแบบอักษรจะมีขนาดเล็กมากและด้วยเงาข้อความของคุณแบบอักษรก็ไม่ทำให้เกิดปัญหาใด ๆ

— Evolutio

ใน Chrome ปัจจุบัน (58.0.3029.110) ข้อความ "เรียบ" ดูน่ากลัวจริงๆ (ข้อความ "jaggy" ค่อนข้างดีกว่า)

— RecursiveExceptionException

7

หลังจากพบปัญหานี้ฉันพบว่าไฟล์ WOFF ของฉันทำงานไม่ถูกต้องฉันได้ส่ง TTF ใหม่ไปยังFontSquirrelซึ่งให้ WOFF ที่เหมาะสมซึ่งราบรื่นใน Firefox โดยไม่ต้องเพิ่ม CSS เพิ่มเติมใด ๆ

— azenet
แหล่งที่มา

มันอยู่ใน windows?

— Vignesh

5

ฉันพบวิธีแก้ปัญหาด้วยลิงค์นี้: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

วิธีการทีละขั้นตอน:

ส่งแบบอักษรของคุณไปยัง WebFontGenerator และรับ zip
ค้นหาแบบอักษร TTF ในไฟล์ Zip
จากนั้นบน linux ให้ทำคำสั่งนี้ (หรือติดตั้งโดยapt-get install ttfautohint):
ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
จากนั้นส่งไฟล์ TTF ใหม่ (neosansstd-black.changed.ttf) บน WebFontGenerator
คุณจะได้รับ Zip ที่สมบูรณ์แบบด้วยแบบอักษรของเว็บทั้งหมด!

ฉันหวังว่านี่จะช่วยได้

— Plici Stéphane
แหล่งที่มา

ทำได้ดีมากในการแก้ไขการกระตุกแบบอักษรระหว่างการเปลี่ยน css (แม้ว่าจะไม่ได้ลบออกทั้งหมด) ฉันใช้โปรแกรมสร้าง FontSquirrel กับตัวเลือก TTFAutohint

— Andrey

ฉันใช้ Fontie เพื่อสร้างไฟล์ WOFF, WOFF2, EOT และ SVG ของฉันอีกครั้งโดยเปิดใช้งาน autohint สำหรับ Windows

— Dominique

4

... ในแท็กเนื้อหาและสิ่งเหล่านี้จากเนื้อหาและแบบอักษรดูดีกว่าโดยทั่วไป ...

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}


#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

— user3634787
แหล่งที่มา

2

ฉันขอโทษ ... "reinschreiben" คืออะไร? พวกเราส่วนใหญ่ไม่พูดภาษาเยอรมันดังนั้นคงจะดีถ้าคุณโพสต์เป็นภาษาอังกฤษทั้งหมด

— rayryeng

3

โอ้ได้โปรดฉันขอโทษที่แปลด้วย Google และคำผิดตั้งแต่ลื่นล้ม :)

— user3634787

3

เมื่อสีของข้อความมืดใน Safari และ Chrome ฉันได้ผลลัพธ์ที่ดีกว่าด้วยคุณสมบัติ css text-stroke

-webkit-text-stroke: 0.5px #000;

— Christelle
แหล่งที่มา

คำถามเกี่ยวกับ Firefox และ Opera ดังนั้นคำตอบนี้จึงไม่เกี่ยวข้องกับคำถาม

— vsync

-4

เพิ่ม

font-weight: normal;

สำหรับฟอนต์ @ font-face ของคุณจะแก้ไขลักษณะที่เป็นตัวหนาใน Firefox

— แอรอน VIII
แหล่งที่มา

7

font-weight(ไม่น่าแปลกใจ) มีผลต่อน้ำหนักตัวอักษรไม่ใช่การปรับแบบอักษรให้เรียบ การเพิ่มลงในการประกาศ @ font-face จะทำให้เกิดความสับสนหากไฟล์ฟอนต์ที่เชื่อมโยงไม่ใช่ไฟล์ฟอนต์ที่มีน้ำหนักปกติ

— Mike Meyer

@MikeMeyer จริงๆแล้วฉันเห็นด้วยกับความคิดเห็นของแอรอน การเพิ่มน้ำหนักแบบอักษร: ปกติให้กับแบบอักษรที่เป็นแบบอักษร "เบา" ดูเหมือนจะเพิ่มความสับสน แต่ควรทำให้นักพัฒนามือใหม่สับสนเท่านั้น เป็นแนวทางปฏิบัติที่ดีในการระบุค่าเริ่มต้นปกติในประสบการณ์ของฉัน ปกติในกรณีนี้หมายถึง "ปกติ" สำหรับแบบอักษรที่รวมและอักขระที่ใช้และไม่ได้มีวัตถุประสงค์เพื่อระบุข้อมูลเกี่ยวกับตัวอักษร ในหลาย ๆ กรณีมันจะ (โดยเฉพาะอย่างยิ่งบนแพลตฟอร์มขนาดใหญ่) ลดโอกาสที่ข้อบกพร่องที่มาจากสถาปัตยกรรมที่ไม่ดีทั่วไปที่คุณเห็นในรูปแบบตัวอักษร

— dudewad

อันที่จริงชื่อของตัวอักษรควรแสดงถึงน้ำหนักของตัวอักษรโดยปริยาย ... !

— dudewad

@dudewad ที่ดีที่คุณเห็นด้วยและใช่มันเป็นความดี ( แต่ค่อนข้างกะทัดรัด-คำ)“โปรปลาย” font-weightเกี่ยวกับ สิ่งที่เป็น OP ไม่ได้ถามเกี่ยวกับfont-weight-he ถูกถามเกี่ยวกับการลดรอยหยัก นี่เป็นคำตอบที่ถูกต้องสำหรับคำถามที่แตกต่างไปจากเดิมอย่างสิ้นเชิง

— Mike Meyer

@MikeMeyer คุณพูดถูกทั้งหมด บางครั้งฉันถูกพาไปเล็กน้อย ;)

— dudewad