ฉันจะทำให้แบบอักษรแสดงผลเหมือนกันในเว็บเบราว์เซอร์ต่างๆได้อย่างไร


11

ฉันกำลังสร้างเว็บไซต์สำหรับลูกค้าและเราหวังว่าจะใช้ข้อความธรรมดาไม่ใช่รูปภาพในแถบนำทาง แบบอักษรที่เราใช้คือ Century Gothic (ฉันเชื่อว่าแบบอักษรนี้มีให้ในพีซีและ Mac ส่วนใหญ่) ปัญหาคือบนเบราว์เซอร์ที่แตกต่างกัน ใน Chrome เราได้รับมันตามที่เราต้องการ แต่ใน firefox ข้อความนั้นเล็กกว่าและโดดเด่นยิ่งขึ้น

นอกเหนือจากการเขียนจาวาสคริปต์เฉพาะของเบราว์เซอร์เพื่อแก้ไขคุณสมบัติแบบอักษรแล้วยังมีตัวเลือกอื่น ๆ เพื่อสร้างมาตรฐานวิธีการแสดงผลแบบอักษรข้ามเบราว์เซอร์ บางทีอาจเป็นไลบรารีหรือ API อาจเป็นเรื่องของการเจาะจงมากขึ้นในการประกาศคุณสมบัติแบบอักษร? สุจริตฉันติดอยู่และต้องการความช่วยเหลือ

คำตอบ:


13

คุณจะไม่ได้รับแบบอักษรและอื่น ๆ เพื่อแสดงผลเหมือนกันในเบราว์เซอร์ การจัดการแบบอักษรเป็นตัวอย่างที่สมบูรณ์แบบ ฉันรู้ว่า Safari บน Windows ชอบทำให้ข้อความเป็นตัวหนาด้วยเหตุผลบางประการ น่าเสียดายที่นี่เป็นวิธีการทำงานของเว็บ ความหลากหลายของเบราว์เซอร์, ระบบปฏิบัติการ, จอภาพ, ตัวประมวลผลกราฟิกและอื่น ๆ หมายความว่ามีหลายวิธีที่คนสามารถดูเว็บเพจได้ ดังนั้นเมื่อสร้างเพื่อคุณต้องรู้และคาดหวังว่าเว็บไซต์ของคุณจะไม่สมบูรณ์แบบสำหรับทุกคน นี่ไม่ใช่งานพิมพ์ มันเป็นเว็บไวด์


ใช่ดูเหมือนว่านี่เป็นความจริงที่โชคร้าย อย่างไรก็ตามดูเหมือนว่าควรเป็นไปได้สำหรับบางคนที่จะเขียนจาวาสคริปต์ที่จะทำให้สิ่งต่าง ๆ ใกล้เคียงกับมาตรฐานมากขึ้นเล็กน้อย
Zach Lysobey

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

1
บทความนี้ (และคนอื่น ๆ ในชุดเดียวกัน) อธิบายปัญหาในรายละเอียดที่ดีถ้าคุณอยากรู้ blog.typekit.com/2010/12/17/…
paulmorriss

เลือกคำตอบของคุณว่าดีที่สุด คุณบอกว่าไม่ใช่ปัญหารหัส แต่แน่นอนว่าบางคนสามารถเขียนโค้ดเพื่อให้ข้อความบรรทัดเดียวยืดออกเป็นความกว้างต่ำสุดเป็นพิกเซล ตัวมันเองจะช่วยปรับปรุงสถานการณ์นี้อย่างมาก มันสามารถทดสอบความกว้าง <p> ที่แสดงผลและเพิ่มระยะห่างของตัวอักษรตามนั้น อาจจะ?
Zach Lysobey

@Zach - คุณสามารถเอาชนะอุปสรรคมากมายด้วยการวางแผนและการเขียนโค้ดอย่างชาญฉลาด แต่ในที่สุดเราก็สามารถควบคุมได้มากเท่านั้น โดยทั่วไปถ้าคุณสามารถรับปัญหาเช่น Safari บน Windows และรหัสรอบ ๆ ส่วนที่เหลือคุณควรจะดี
John Conde

1

จริงๆแล้วมีวิธีการฝังแบบอักษรใน CSS ของคุณ มันง่ายมาก อ้างถึงhttp://randsco.com/index.php/2009/07/04/p680สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำเช่นนี้ ข้อเสียของสิ่งนี้คือเบราว์เซอร์รุ่นเก่า (ก่อน ei 7 และ ff 3 ฉันคิดว่า ... ) ไม่รองรับสิ่งนี้ แต่จำนวนผู้ใช้เบราว์เซอร์เก่าเหล่านี้ลดน้อยลงอย่างรวดเร็วและยังเป็นไปได้ที่จะระบุแบบอักษรสำรองที่ใช้งานได้และมักใช้กับพีซีส่วนใหญ่ในกรณีนี้

อีกวิธีที่ฉันไม่ได้ใช้เกี่ยวข้องกับการใช้แฟลช ฉันไม่มีข้อมูลเกี่ยวกับสิ่งอื่นนอกเหนือจากที่ฉันรู้


ใน css note ให้แน่ใจว่าใช้เฉพาะแบบอักษรที่คุณจะไม่ถูกละเมิดลิขสิทธิ์หากบุคคลอื่นใช้แบบอักษรนั้นเช่นเดียวกับเมื่อคุณใช้วิธี css ที่ทุกคนสามารถเข้าถึงเว็บไซต์ของคุณได้
Kenneth

ว่าวิธีการแฟลชเรียกว่าsIFR มันมีข้อดีและข้อเสียเช่นกัน
John Conde

ดังที่ได้กล่าวไว้ในคำตอบอื่น ๆ แม้การใช้วิธีการนี้จะมีความแตกต่างกันเล็กน้อยระหว่างเบราว์เซอร์และระบบ แต่มีสิ่งที่คุณสามารถทำได้กับส่วนที่เหลือของการออกแบบเว็บไซต์ของคุณที่สามารถชดเชยและทำให้เว็บไซต์แสดงผลได้ดี สิ่งหนึ่งที่สำคัญคือมีเบราว์เซอร์หลายตัวและระบบปฏิบัติการที่จะทดสอบไซต์ของคุณ
เคนเน็ ธ

1

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

รีเซ็ต CSS แนวคิดนั้นง่ายคุณตั้งค่าเริ่มต้นของแท็ก HTML ในสไตล์ชีทเพื่อตั้งค่าจุดเริ่มต้นทั่วไปสำหรับการแสดงผล HTML นี่คือบทความและตัวอย่าง: http://meyerweb.com/eric/tools/css/reset/

ประกาศประเภท Doctype http://htmlhelp.com/tools/validator/doctype.html

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