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

14

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

inny odcinek czcionki

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?

Goro
źródło
1
Czy najpierw wykonałeś reset CSS?
kei
@kei: Reset nie wydaje się mieć efektu
Goro
Ciekawy. Otrzymuję taki sam wynik jak twój obraz: jsfiddle.net/YGwcn Wygląda na to, że każda przeglądarka interpretuje styl.
kei

Odpowiedzi:

14

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.

Nacięcie
źródło
5
Uważaj na różne rzeczy, takie jak „Użyj elementów zamiast pisma dla elementów paska nawigacji”. Obrazy będą wyglądać okropnie na nowszych komputerach z wyświetlaczami o wysokiej rozdzielczości (np. Wyświetlacze Apple „Retina”, niektóre inne smartfony), chyba że dostarczysz również kopię o podwójnej rozdzielczości.
Olly Hodgson
@OllyHodgson Sure. PNG o podwójnej wielkości lub pliki SVG (do tego używa Apple do nawigacji) byłyby najlepsze dla ekranów o wysokiej rozdzielczości.
Nick
@Nick - Tak, SVG byłoby najlepszym rozwiązaniem.
m93a,
Nie w tym przypadku by nie. Firefox nie obsługuje letter-spacingelementów SVG.
Yay295
@ Yay295 Możesz zarysować czcionki w SVG.
Nick
5

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

paulmorriss
źródło
2

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

Mikrofon
źródło
0

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.

Alan Hughes
źródło
0

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

Kevin Chadwick
źródło
0

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.

Andy
źródło
0

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

-webkit-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;
ABC
źródło