Tampilan font berbeda di Firefox vs. Chrome

Tampaknya bilah menu saya ditampilkan dengan bentangan font yang berbeda di Firefox daripada di Chrome. Lihat yang berikut ini:

Inilah CSS yang diterapkan pada elemen ini:

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

Sejauh yang saya tahu semuanya tentang font itu persis sama, namun mereka masih menampilkan berbeda (lihat gambar). Mengapa?

Chrome menggunakan mesin rendering WebKit. Firefox menggunakan mesin Gecko. Keduanya mengartikan dan menampilkan tipe yang sedikit berbeda, seperti halnya mesin grafis DirectX dan Vega yang digunakan dalam IE9 + dan Opera.

Anda tidak dapat memaksa browser untuk merender teks secara identik, tetapi Anda dapat melakukan beberapa hal untuk memastikan bahwa navigasi Anda menggunakan lebar yang sama di seluruh browser:

1. Gunakan gambar atau SVG alih-alih mengetik untuk elemen bilah navigasi Anda. Ini mungkin terbukti bermanfaat jika area navigasi Anda tidak sering berubah. mis. www.apple.com

2. Perbaiki lebar setiap elemen navigasi dengan CSS. Ukuran teks masih akan terlihat berbeda di antara browser, tetapi jika Anda memberi setiap <li>elemen di area navigasi Anda lebar piksel tetap, kotak pembatas setiap tautan akan sangat mirip di seluruh browser dan lebar total area nav harus sama.

Perbedaan rendering font antara browser yang berbeda (dan pada sistem operasi yang berbeda) adalah fakta kehidupan. Anda hanya perlu memastikan bahwa jika font ditampilkan dengan lebar yang berbeda, desain Anda masih dapat mengatasinya.

Kalau-kalau ada yang menemukan ini, bagi saya masalahnya adalah letter-spacing. Chrome dan Firefox menangani properti secara berbeda.

Masalah saya adalah letter-spacingitu mempengaruhi posisi elemen lain; khusus beberapa gambar di menu nav. Dengan menghapus properti, masalah saya langsung terpecahkan.

Saya juga membaca bahwa secara khusus menggunakan .pointnilai - nilai dapat memiliki efek mengubah antara 2 browser, yang benar dalam kasus saya.

jenis masalah yang sama dinyatakan di sini

Anda dapat mengatur ulang css Anda dengan

http://developer.yahoo.com/yui/reset/ harap jangan-jangan Anda mendapat petunjuk

Saya telah menemukan bahwa webkit akan mendukung px untuk ukuran font, tetapi untuk hal-hal seperti spasi huruf mereka akan mengabaikan semuanya bersama-sama jika Anda tidak menggunakannya.

Setelah menguji 6 browser / 4 mesin rendering pada dua OS. Saya telah menemukan sebagian besar sama bahkan dengan spasi baris. Saya akan melihat perbedaannya dengan windows dan Linux dalam satu menit.

Saya pikir font Palatino tersedia di mana-mana tetapi chrome jatuh kembali ke kali roman yang sedikit lebih kecil, font default memiliki hasil yang sama (chrome berbeda) yang menyesatkan saya sebentar.

Pokoknya jika Anda menentukan waktu roman atau menggunakan @fontface untuk memasok file font! Anda mungkin dapat membuat nav bar Anda lebih licin ;-)

Saya memiliki masalah yang sama dan menemukan solusi:

Menggunakan:

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

Di Firefox, ini terlihat hebat. Di Chrome, penspasian hurufnya aneh. Menghapus optimizelegibilitygaya memang berhasil. Kedua browser ditampilkan secara identik sekarang.

Saya memutuskan untuk menghapus style untuk webkit dan membiarkannya di browser lain. Terlihat baik-baik saja sekarang.

Saya memiliki masalah serupa dengan Open-Sans, ini berhasil untuk saya:

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