แบบอักษรแสดงแตกต่างกันใน Firefox กับ Chrome

14

ดูเหมือนว่าแถบเมนูของฉันจะแสดงแบบอักษรที่แตกต่างกันใน Firefox มากกว่าใน Chrome ดูต่อไปนี้:

ยืดแบบอักษรที่แตกต่างกัน

นี่คือ CSS ที่ใช้กับองค์ประกอบนี้:

font-variant: small-caps;
font-size:13px;
letter-spacing: 0px;
font-family: Arial;
font-stretch: normal;
text-decoration: none;

เท่าที่ฉันสามารถบอกได้ทุกอย่างเกี่ยวกับแบบอักษรนั้นเหมือนกัน แต่พวกเขาก็ยังแสดงแตกต่างกัน (ดูรูป) ทำไม?

css firefox google-chrome

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

1

คุณทำการรีเซ็ต CSS เป็นอันดับแรกหรือไม่

— kei

@kei: การรีเซ็ตดูเหมือนจะไม่มีผล

— Goro

น่าสนใจ ฉันได้รับผลลัพธ์เช่นเดียวกับภาพของคุณ: jsfiddle.net/YGwcn ดูเหมือนจะลงไปที่แต่ละเบราว์เซอร์ตีความสไตล์

— kei

14

Chrome ใช้เครื่องมือแสดงผล WebKit Firefox ใช้เอ็นจิ้นตุ๊กแก ทั้งตีความและแสดงผลแตกต่างกันเล็กน้อยเช่นเดียวกับเอ็นจิ้น DirectX และ Vega ที่ใช้ใน IE9 + และ Opera

คุณไม่สามารถบังคับให้เบราว์เซอร์แสดงข้อความเหมือนกัน แต่คุณสามารถทำสองสิ่งเพื่อให้แน่ใจว่าการนำทางของคุณใช้ความกว้างเท่ากันทั่วทั้งเบราว์เซอร์:

ใช้รูปภาพหรือ SVG แทนประเภทสำหรับองค์ประกอบแถบนำทางของคุณ สิ่งนี้อาจพิสูจน์ได้ว่ามีประโยชน์หากพื้นที่นำทางของคุณไม่น่าจะเปลี่ยนบ่อย เช่นwww.apple.com
แก้ไขความกว้างของแต่ละองค์ประกอบการนำทางด้วย CSS ขนาดตัวอักษรจะยังคงแตกต่างกันระหว่างเบราว์เซอร์ แต่ถ้าคุณให้แต่ละ<li>องค์ประกอบในพื้นที่การนำทางของคุณมีความกว้างพิกเซลคงที่กล่องของแต่ละลิงก์จะคล้ายกันมากในเบราว์เซอร์และความกว้างทั้งหมดของพื้นที่นำทางควรเท่ากัน

— กรงขัง
แหล่งที่มา

5

คุณต้องระวังสิ่งต่าง ๆ เช่น "ใช้รูปภาพแทนชนิดสำหรับองค์ประกอบแถบนำทาง" ภาพจะดูน่ากลัวบนเครื่องรุ่นใหม่ที่มีหน้าจอความละเอียดสูง (เช่นหน้าจอ "Retina" ของ Apple, โทรศัพท์สมาร์ทโฟนอื่น ๆ ) เว้นแต่คุณจะให้สำเนาความละเอียดสองเท่า

— Olly Hodgson

@ OllyHodgson แน่นอน PNG หรือ SVG ขนาดสองเท่า (ซึ่งเป็นสิ่งที่ Apple ใช้ในการนำทาง) จะดีที่สุดสำหรับหน้าจอความละเอียดสูง

— นิค

@Nick - ใช่ SVG จะเป็นทางออกที่ดีที่สุด

— m93a

ไม่ในกรณีนี้มันจะไม่ Firefox ไม่รองรับletter-spacingองค์ประกอบ SVG

— Yay295

@ Yay295 คุณสามารถร่างแบบอักษรใน SVG

— นิค

5

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

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

2

letter-spacingในกรณีที่คนข้ามมานี้สำหรับฉันที่เป็นปัญหา Chrome และ Firefox จัดการคุณสมบัติแตกต่างกัน

ปัญหาของฉันคือการที่letter-spacingมีผลต่อตำแหน่งขององค์ประกอบอื่น ๆ ; เฉพาะบางภาพในเมนูนำทาง ด้วยการลบคุณสมบัติปัญหาของฉันแก้ไขได้ทันที

ฉันได้อ่านด้วยว่าการใช้ .pointค่าโดยเฉพาะสามารถมีผลต่อการเปลี่ยนแปลงระหว่าง 2 เบราว์เซอร์ซึ่งเป็นจริงในกรณีของฉัน

— ไมค์
แหล่งที่มา

0

ชนิดของปัญหาเดียวกันที่ระบุไว้ที่นี่

คุณสามารถรีเซ็ต css ของคุณได้

http://developer.yahoo.com/yui/reset/ หวังอย่างยิ่งว่าคุณจะได้รับเบาะแสจาก

— ช่องเสียบ
แหล่งที่มา

0

ฉันพบว่า webkit จะสนับสนุน px สำหรับขนาดตัวอักษร แต่สำหรับสิ่งต่าง ๆ เช่นระยะห่างระหว่างตัวอักษรพวกเขาจะไม่สนใจเลยหากคุณไม่ใช้ em

— อลันฮิวจ์
แหล่งที่มา

0

หลังจากทดสอบเบราว์เซอร์ 6 ตัว / 4 เอ็นจิ้นการแสดงผลบนสองระบบปฏิบัติการ ฉันพบว่าส่วนใหญ่เหมือนกันแม้จะมีระยะห่างระหว่างบรรทัด ฉันจะดูถึงความแตกต่างกับ windows และ Linux ในเวลาไม่กี่นาที

ฉันคิดว่าตัวอักษร Palatino ใช้ได้ทุกที่ แต่โครเมี่ยมย้อนกลับไปสมัยโรมันซึ่งเล็กกว่าเล็กน้อยแบบอักษรเริ่มต้นมีผลลัพธ์เหมือนกัน (แตกต่างกันด้วย Chrome) ซึ่งทำให้ฉันเข้าใจผิดเล็กน้อย

อย่างไรก็ตามถ้าคุณระบุเวลาเป็น roman หรือใช้ @fontface เพื่อใส่ไฟล์ font! คุณอาจสามารถทำให้แถบ nav สั่นได้ ;-)

— เควินแชดวิค
แหล่งที่มา

0

ฉันมีปัญหาที่คล้ายกันและพบวิธีแก้ปัญหา:

โดยใช้:

font-family: 'Donegal One', serif;
font-variant: small-caps;
text-rendering: optimizeLegibility;

ใน Firefox มันดูดี ใน Chrome ระยะห่างระหว่างตัวอักษรผิดปกติ การถอดoptimizelegibilityสไตล์นั้นเป็นการหลอกลวง เบราว์เซอร์ทั้งสองแสดงผลเหมือนกันแล้ว

ฉันตัดสินใจที่จะลบสไตล์สำหรับ webkit และทิ้งไว้กับเบราว์เซอร์อื่น ดูดีตอนนี้

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

0

ฉันมีปัญหาคล้ายกันกับ Open-Sans สิ่งนี้ทำเพื่อฉัน:

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

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