Czcionka wyświetla się inaczej w przeglądarce Firefox niż w Chrome

Wygląda na to, że mój pasek menu jest wyświetlany z inną czcionką w Firefoksie niż w Chrome. Zobacz:

Oto CSS zastosowany do tego elementu:

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

O ile mogę powiedzieć, wszystko dotyczące tej czcionki jest dokładnie takie samo, ale nadal wyświetlają się inaczej (patrz zdjęcie). Dlaczego?

Chrome korzysta z silnika renderowania WebKit. Firefox korzysta z silnika Gecko. Zarówno interpretacja, jak i wyświetlanie są nieco inne, podobnie jak w przypadku silników graficznych DirectX i Vega używanych w IE9 + i Operze.

Nie możesz zmusić przeglądarek do identycznego renderowania tekstu, ale możesz zrobić kilka rzeczy, aby upewnić się, że nawigacja zajmuje taką samą szerokość w różnych przeglądarkach:

1. Używaj obrazów lub plików SVG zamiast pisma dla elementów paska nawigacji. Może się to okazać przydatne, jeśli obszar nawigacji prawdopodobnie nie zmienia się często. np. www.apple.com

2. Napraw szerokość każdego elementu nawigacyjnego za pomocą CSS. Rozmiar tekstu nadal będzie wyglądał inaczej w różnych przeglądarkach, ale jeśli nadasz każdemu <li>elementowi w obszarze nawigacji stałą szerokość w pikselach, ramka graniczna każdego linku będzie bardzo podobna w różnych przeglądarkach, a całkowita szerokość obszaru nawigacji powinna być taka sama.

Różnice w renderowaniu czcionek między różnymi przeglądarkami (i różnymi systemami operacyjnymi) są faktem. Musisz tylko upewnić się, że jeśli czcionka wyświetla się na różnych szerokościach, Twój projekt nadal może sobie poradzić.

W przypadku, gdy ktoś się z tym spotka, problem był dla mnie letter-spacing. Chrome i Firefox obsługują tę właściwość inaczej.

Mój problem polegał na tym, że letter-spacingwpływał na pozycję innych elementów; w szczególności niektóre obrazy w menu nawigacyjnym. Po usunięciu własności mój problem został natychmiast rozwiązany.

Przeczytałem również, że użycie .pointwartości może mieć wpływ na zmianę między dwiema przeglądarkami, co w moim przypadku było prawdą.

rodzaj tego samego problemu tutaj podany

możesz zresetować css przez

http://developer.yahoo.com/yui/reset/ miej nadzieję, że nie dostaniesz jakiegoś pojęcia

Odkryłem, że webkit będzie obsługiwał px dla rozmiaru czcionki, ale w takich rzeczach jak odstępy między literami zignorują to wszystko razem, jeśli ich nie użyjesz.

Po przetestowaniu 6 przeglądarek / 4 silników renderujących na dwóch systemach operacyjnych. Odkryłem, że większość była taka sama, nawet z odstępami między wierszami. Za chwilę przyjrzę się różnicy w systemach Windows i Linux.

Myślałem, że czcionka Palatino jest dostępna wszędzie, ale Chrome wrócił do czasów rzymskich, które są nieco mniejsze, czcionki domyślne miały takie same wyniki (inne chromy), co nieco mnie wprowadziło w błąd.

W każdym razie, jeśli podasz czasy rzymskie lub użyjesz @fontface, aby dostarczyć pliki czcionek! możesz sprawić, że paski nawigacyjne będą bardziej ruchliwe ;-)

Miałem podobny problem i znalazłem rozwiązanie:

Za pomocą:

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

W przeglądarce Firefox wygląda świetnie. W Chrome odstępy między literami były dziwne. Usunięcie optimizelegibilitystylu załatwiło sprawę. Obie przeglądarki wyświetlają się teraz identycznie.

Postanowiłem usunąć styl dla webkita i pozostawić go na miejscu dla innych przeglądarek. Teraz wygląda dobrze.

Miałem podobny problem z Open-Sans, to zrobiło to dla mnie:

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