Yazı tipi Firefox ve Chrome'da farklı görünüyor

Menü çubuğum Firefox'ta Chrome'da olduğundan farklı bir yazı tipi uzantısıyla görüntüleniyor. Aşağıdakilere bakın:

İşte bu öğeye uygulanan CSS:

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

Bu yazı tipiyle ilgili her şeyi tam olarak aynı olduğunu söyleyebildiğim kadarıyla yine de farklı görünüyorlar (resme bakın). Neden?

Chrome, WebKit oluşturma motorunu kullanır. Firefox, Gecko motorunu kullanıyor. IE9 + ve Opera'da kullanılan DirectX ve Vega grafik motorları gibi, türü hem yorumlayın hem de görüntüleyin.

Tarayıcıları metni aynı şekilde oluşturmaya zorlayamazsınız, ancak navigasyonunuzun tarayıcılar arasında aynı genişliğe sahip olmasını sağlamak için birkaç şey yapabilirsiniz:

1. Gezinme çubuğu öğeleriniz için tür yerine resimler veya SVG'ler kullanın. Navigasyon alanınızın sık sık değişme olasılığı düşükse, bu yararlı olabilir. ör. www.apple.com

2. Her gezinme öğesinin genişliğini CSS ile sabitleyin. Metin boyutu tarayıcılar arasında hala farklı görünecektir, ancak <li>gezinme alanınızdaki her öğeye sabit bir piksel genişliği verirseniz , her bağlantının sınırlayıcı kutusu tarayıcılar arasında çok benzer olacaktır ve gezinme alanının toplam genişliği aynı olmalıdır.

Farklı tarayıcılar arasında (ve farklı işletim sistemlerinde) yazı tipi oluşturmadaki farklılıklar hayatın bir gerçeğidir. Yazı tipi farklı genişliklerde görüntüleniyorsa tasarımınızın hala başa çıkabileceğinden emin olmanız yeterlidir.

Birisi bununla karşılaşırsa, benim için sorun buydu letter-spacing. Chrome ve Firefox özelliği farklı şekilde ele alır.

Benim sorunum letter-spacingdiğer elementlerin pozisyonunu etkilemekti; özellikle gezinme menüsündeki bazı görüntüler. Özelliği kaldırarak sorunum anında çözüldü.

Ayrıca özellikle .pointdeğerleri kullanarak 2 tarayıcı arasında değişen etkileri olabilir, bu benim durumumda doğru olduğunu okudum .

burada belirtildiği gibi aynı sorun

css'nizi sıfırlayabilirsiniz

http://developer.yahoo.com/yui/reset/ Umarım hiç ipucu almazsın

Webkit'in yazı tipi boyutu için px'i destekleyeceğini buldum, ancak harf aralığı gibi şeyler için em kullanmazsanız hepsini birlikte yok sayacaklar.

İki işletim sisteminde 6 tarayıcı / 4 görüntüleme motoru test ettikten sonra. En çok satır aralığıyla bile aynı olduğunu gördüm. Bir dakika içinde Windows ve Linux arasındaki farkı inceleyeceğim.

Palatino yazı tipinin her yerde mevcut olduğunu düşündüm, ancak krom biraz daha küçük olan roma geri döndü, varsayılan yazı tipleri beni biraz yanlış yönlendiren aynı sonuçlara (krom farklı) sahipti.

Her neyse, zamanları roman belirtirseniz veya font dosyalarını sağlamak için @fontface kullanırsanız! gezinme çubuklarınızı daha ince yapabilirsiniz ;-)

Benzer bir sorun yaşadım ve bir çözüm buldum:

Kullanımı:

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

Firefox'ta harika görünüyor. Chrome'da harf aralığı garipti. optimizelegibilityStili kaldırmak hile yaptı. Her iki tarayıcı da artık aynı şekilde görüntüleniyor.

Webkit için stili kaldırmaya ve diğer tarayıcılar için yerinde bırakmaya karar verdim. Şimdi iyi görünüyor.

Open-Sans ile benzer bir sorunum vardı, bu benim için yaptı:

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