Tampilan font berbeda di Firefox vs. Chrome

14

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

bentangan font yang berbeda

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?

css firefox google-chrome

— Goro
sumber

1

Sudahkah Anda melakukan reset CSS terlebih dahulu?

— kei

@ kei: Reset sepertinya tidak berpengaruh

— Goro

Menarik. Saya mendapatkan hasil yang sama dengan gambar Anda: jsfiddle.net/YGwcn Tampaknya tergantung pada bagaimana masing-masing browser mengartikan gaya.

— kei

14

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:

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
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.

— Nick
sumber

5

Anda harus sangat berhati-hati dengan hal-hal seperti "Gunakan gambar daripada mengetik untuk elemen bilah navigasi Anda". Gambar akan terlihat buruk pada mesin yang lebih baru dengan tampilan resolusi tinggi (mis. Tampilan Apple "Retina", beberapa ponsel pintar lainnya) kecuali jika Anda juga menyediakan salinan resolusi ganda.

— Olly Hodgson

@OllyHodgson Tentu. PNG atau SVG ukuran ganda (yang digunakan Apple untuk nav mereka) adalah yang terbaik untuk layar beresolusi tinggi.

— Nick

@Nick - Ya, SVG akan menjadi solusi terbaik.

— m93a

Tidak dalam kasus ini tidak. Firefox tidak mendukung letter-spacingelemen SVG.

— Yay295

@ Yay295 Anda dapat menguraikan font di SVG.

— Nick

5

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.

— paulmorriss
sumber

2

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.

— Mike
sumber

0

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

— Mendongkrak
sumber

0

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.

— Alan Hughes
sumber

0

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 ;-)

— Kevin Chadwick
sumber

0

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.

— Andy
sumber

0

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

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

— Plinto
sumber